function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Remco Sellmeijer 4Remco Sellmeijer 4 

How to catch touch events on lightning components?

Hi all,

I'm currently exploring how to build a mobile application using Lightning Components. 
At some point, I want to integrate swipe functionality which should work the same as the left and right swiping of emails in the Google Gmail app for Android.
I created a Lightning component with a simple div in it and I added a simple touch event to see if it's possible to create the swipe functionality using the standard javascript touch events (touchstart, touchend, touchcancel etc.) 
doInit : function(component, event, helper) { 
		var box1 = document.getElementById('box1');

		box1.addEventListener('touchstart', function(e){
			console.log(e.touches[0].pageX);
		}) 
}
On clicking the component, it should log the x coordinates of the touch event. Instead pageX is undefined. 
Does anybody have an idea of how I can get this to work? Or is it simply not possible using Lightning Components.

Thanks in advance and have a nice day.

 
jprichterjprichter

tl;dr; Per this stackexchange (http://salesforce.stackexchange.com/a/129168/25289), `touches` is not yet supported. Read the comments.

 

I tested this:

<aura:component>
    <aura:attribute name="touchStart" type="double" default="0.00" />
    <aura:attribute name="touchEnd" type="double" default="0.00" />
    <!-- <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <p>Click on the blue "buttons" to make the red square move.</p> -->

    <div class="box" onclick="{!c.doStuff}">
    </div>

    <div>
    	<ui:outputText value="{!v.touchStart}"/>
    </div>
    <div>
    	<ui:outputText value="{!v.touchEnd}"/>
    </div>
</aura:component>

({
    doStuff: function(component, event, helper) {
        document.addEventListener('touchstart', function(e) {
            component.set('v.touchStart', e.pageX);
        });
        document.addEventListener('touchend', function(e) {
            component.set('v.touchEnd', e.pageX);
        });
        
        document.addEventListener('mousedown', function(e) {
            console.log(e.pageX);
            component.set('v.touchStart', e.pageX);

        });
        document.addEventListener('mouseup', function(e) {
            console.log(e.pageX);
            component.set('v.touchEnd', e.pageX);
        });
    }
})
.THIS {
	margin: 25px;
}

.THIS.box{
	width: 300px;
	height: 100px;
	background-color: red;
}


and with my mouse I was able to get:

User-added image

but when I slid with my finger, nothing happened. Taps, however were recognized.

 

User-added image