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

Я используюhammer.js и кажется, что яevent.stopPropagation() не работает с событием касания.

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

$('#parent').hammer().bind('tap', function(e) {
    $(this).css('background', 'red');
});​​​​​​​​

$('#child').hammer().bind('tap', function(e) {
    e.stopPropagation();
    $(this).css('background', 'blue');
});

Вот пример:http://jsfiddle.net/Mt9gV/

& # X200B; Я тоже пробовал сjGestures и проблема, кажется, та же самая. Как я могу достичь этого результата с одной из этих библиотек? (или другой, если это необходимо)

 TimPetricola13 июн. 2012 г., 19:19
К сожалению, если я не приложу молоток к обоим элементам, событие касания не будет работать.
 Pointy13 июн. 2012 г., 19:13
Я думаю, что это может иметь какое-то отношение к тому факту, что вы настроили «молоток» материал как на родительском, так и на дочернем элементах. Однако я не уверен на 100%.

Ответы на вопрос(5)

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

 TimPetricola13 июн. 2012 г., 20:18
Хорошая идея, но она возвращает родительский элемент, даже если я нажимаю на ребенка.
 13 июн. 2012 г., 20:30
Хммм. У меня есть подозрение, что Хаммер на самом деле связываетwindow объект выполняет все свои вычисления, вычисляя глобальные координаты X / Y события касания и затем определяя, какой элемент был выбран из этого. В этом случае stopPropagation не будет иметь никакого эффекта. Но я просто догадываюсь с первого взгляда наHammer.js source!

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

return false;

что то же самое, что звонить     e.preventDefault ();     e.stopPropagation ();

Решение Вопроса

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

Details: Однако в Hammer.jsthis is not so, Hammer создает новый конечный автомат жестов для каждого элемента, к которому вы обращаетесь$(el).hammer(), Таким образом, когда сенсорное событие инициирует дочернее событие в браузере, оно обрабатывается сначала логикой для дочернего элемента, а затем снова логикой родительского элемента. Как таковой, чтобы помешать родителю получитьtap событие, которое вы должны предотвратить, чтобы конечный автомат родителя не получилoriginal touch event, Вообще звонюevent.stopPropagation() также остановит распространение исходного события. Тем не менее, hammer.jstap событие происходитtouchend ноoriginalEvent это кешируетсяtouchstart событие. Таким образом, остановка распространения на исходном событии не имеет никакого эффекта, потому чтоtouchstart событие давно вспыхнуло через DOM.

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

 19 июл. 2013 г., 12:28
Мы используем код, почти идентичный оригинальному фрагменту TimPetricola. Я могу подтвердить, что он работает должным образом с Hammer.JS - v1.0.5 - 2013-04-07. Похоже, Hammer.js серьезно отнесся к этой проблеме и исправил ее.
 19 июн. 2013 г., 19:55
Примечание: мой ответ на этот вопрос устарел - hammer.js был значительно изменен с момента публикации.

тод на кране после подтверждения необходимости (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
});
 13 июн. 2012 г., 19:23
Почему бы вам не написать свой код в строгом режиме?
 13 июн. 2012 г., 19:15
arguments.callee являетсяnow deprecated
 13 июн. 2012 г., 19:19
Я бы предположил, что это только в строгом режиме ...developer.mozilla.org/en/JavaScript/Reference/… и я бы не позволил такой мелочи помешать мне закончить задачу под рукой ... используйте это и вернитесь к проблеме, как только вы закончите.
 13 июн. 2012 г., 19:25
Я нахожу эту иронию, учитывая, что ваш первый пример кода не работает ...
 13 июн. 2012 г., 19:10
Я не понимаю этих слов в таком порядке ...

я использовал переменную, чтобы узнать, было ли уже запущено дочернее событие. Это работает довольно хорошо с 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');
});

& # X200B;

 09 окт. 2013 г., 04:38
Я могу подтвердить, что эта логика работает и с hammer.js.

Ваш ответ на вопрос