touchend事件被触发两次(touchend event gets triggered twice)

touchend事件被触发两次(touchend event gets triggered twice)

这是我的代码，以防发生touchend事件：

$('body').on('click touchend', '.typeSelect', function(){ var Classes = $(this).attr('class').split(" "); var width1 = $(this).width(); $('.active').removeClass('active'); $(this).addClass('active'); $('.typeDropDownList').hide(); $('.'+Classes[0]+'List').css({'width' : width1+12}).toggle(); });

如果事件是click ，一切正常，但如果它是touchend ，这个函数被调用两次。 这是为什么？

This is my code in case touchend event occurs:

$('body').on('click touchend', '.typeSelect', function(){ var Classes = $(this).attr('class').split(" "); var width1 = $(this).width(); $('.active').removeClass('active'); $(this).addClass('active'); $('.typeDropDownList').hide(); $('.'+Classes[0]+'List').css({'width' : width1+12}).toggle(); });

If the event is click, everything works fine, but if it's touchend, this function gets called twice. Why is that?

最满意答案

如果事件类型被触发，请关闭点击

$('body').on('click touchend', '.typeSelect', function(e){ e.stopPropagation(); e.preventDefault(); if(e.type == 'touchend'){ $(this).off('click'); } var Classes = $(this).attr('class').split(" "); var width1 = $(this).width(); $('.active').removeClass('active'); $(this).addClass('active'); $('.typeDropDownList').hide(); $('.'+Classes[0]+'List').css({'width' : width1+12}).toggle(); });

Turn off click if event type is touchend

$('body').on('click touchend', '.typeSelect', function(e){ e.stopPropagation(); e.preventDefault(); if(e.type == 'touchend'){ $(this).off('click'); } var Classes = $(this).attr('class').split(" "); var width1 = $(this).width(); $('.active').removeClass('active'); $(this).addClass('active'); $('.typeDropDownList').hide(); $('.'+Classes[0]+'List').css({'width' : width1+12}).toggle(); });