jQuery 触摸事件

Question

如何管理触摸事件。当我在不同的元素上写几个 touchstarts 时，它们都会同时激活，我无法将它们分开。你能帮我理解如何在没有第三方库的情况下正确管理它们吗？如果有提示或小教程，我将不胜感激。

$(".content").on("touchstart", function(){$(this).stop().animate({top: '-50px'}, 600);});

Answer 1

根据您的问题，似乎 event 在 dom 树上冒泡。这意味着如果您触发绑定在子元素上的任何事件并且相同的事件也应用于父元素，那么发生在子元素上的任何事件都将爬升到父元素并且也执行相同的事件。

所以我建议你使用event.stopPropagation();并在回调函数中传递event：

$('.main').on('touchstart', function() { 
     $('.main').stop().animate({top: '0px'}, 600, 'easeOutBounce'); 
}); 

$('.content').on('touchstart', function(event) { 
    event.stopPropagation();
    $('.content').stop().animate({top: '-50px'}, 600, 'easeOutBounce'); 
});

看下面的演示，使用click事件。

$('.main').click(function(){
    alert(this.className + ' clicked.');
});

$('.content').click(function(event){
    //event.stopPropagation();
    alert(this.className + ' clicked.');
});


// you can enable the commented line and see the effect.

.main{border:solid 1px green; padding:20px;}
.content{border:solid 1px red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main"> parent<br><br><div class="content">child</div> </div>

jQuery 触摸事件

jQuery touch events

jquery

touch

touch-event

jquery-mobile