stopPropagation() с событием касания

Как упоминалось в другом комментарии, можно было бы ожидать, как и вы, что вызов event.stopPropagation() будет всем, что требуется, чтобы предотвратить всплытие события до родителя.

Подробности. Однако в Hammer.js это не так. Hammer создает новый конечный автомат жеста для каждого элемента, для которого вы вызываете $(el).hammer(). Таким образом, когда браузер запускает сенсорное событие для дочернего элемента, оно сначала обрабатывается логикой для дочернего элемента, а затем снова логикой для родителя. Таким образом, чтобы запретить родительскому элементу получать событие tap, вы должны запретить конечному автомату молотка родителя получать исходное событие касания. Как правило, вызов event.stopPropagation() также останавливает распространение исходного события. Однако событие tap в Hammer.js запускается для touchend, но originalEvent является кэшированным событием touchstart. Таким образом, остановка распространения исходного события не имеет никакого эффекта, потому что событие touchstart уже давно всплыло в DOM.

Решение? Я считаю, что это ошибка в молотке. Отправьте запрос на вытягивание, который исправляет originalEvent в событии касания. Как предлагали другие, вы можете проверить цель события, но это всегда родительский элемент - на мой взгляд, еще одна ошибка. Поэтому вместо этого проверьте файл event.originalEvent.target. Вот скрипка JS с этим посредственным решением: http://jsfiddle.net/HHRHR/

Поскольку я не мог получить эту работу, я использовал переменную, чтобы узнать, было ли уже запущено дочернее событие. Он неплохо работает с jGestures (я не пробовал с Hammer.js)

var childTriggered = false;

$('#child').bind('tapone', function(e) {
    $(this).css('background', 'red');
    childTriggered = true;
});

$('#parent').bind('tapone', function(e) {
    if(childTriggered) {
        childTriggered = false;
        return;                
    }
    $(this).css('background', 'blue');
});

​

У меня были аналогичные проблемы с сенсорными событиями.

Я решил это с помощью

return false;

что аналогично вызову e.preventDefault(); e.stopPropagation();

Если вы не можете заставить это работать ... просто вызовите другой метод на кране после проверки необходимости (arguments.callee - это то, с чего я бы начал в таком случае), это будет иметь дополнительные преимущества, позволяя другим пользователям также зацепить кнопку. ..

function myFn(a) { if(a) $(this).css('background', 'red'); else $(this).css('background', 'blue');}

$('#parent').hammer().bind('tap', function(e) {
   //Check arguments.callee or other data in event and call myFn
});​​​​​​​​

$('#children').hammer().bind('tap', function(e) {
  //Same here
});

Вы можете попробовать проверить e.currentTarget (или e.target?) внутри родительского обработчика, чтобы узнать, какой элемент был нажат; если это дочерний элемент, просто немедленно вернитесь, иначе продолжите функцию.