stopPropagation() với sự kiện nhấn

Question

Tôi đang sử dụng hammer.js và có vẻ như tôi event.stopPropagation() không hoạt động với sự kiện nhấn.

Nếu tôi nhấp vào con, sự kiện được liên kết được kích hoạt nhưng sự kiện của phụ huynh cũng được kích hoạt và tôi không muốn điều đó.

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

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

Dưới đây là một ví dụ: http://jsfiddle.net/Mt9gV/

Tôi cũng đã cố gắng với jGestures và vấn đề này có vẻ là như vậy. Làm thế nào tôi có thể đạt được kết quả này với một trong những thư viện đó? (hoặc một số khác nếu cần)

Answer 1

Như đã đề cập trong các bình luận khác, người ta sẽ mong đợi, như bạn đã làm, đó gọi event.stopPropagation() sẽ là tất cả những gì yêu cầu dừng sự kiện này khỏi sủi bọt lên cha mẹ.

Chi tiết: Tuy nhiên, trong Hammer.js thì không phải như vậy. Hammer tạo ra một máy trạng thái cử chỉ mới cho mỗi phần tử mà bạn gọi là $(el).hammer(). Vì vậy, khi một sự kiện cảm ứng được kích hoạt trên trình duyệt của trẻ, nó sẽ được xử lý trước tiên bởi logic cho trẻ và sau đó một lần nữa bằng logic trên bố mẹ. Để ngăn chặn phụ huynh nhận được sự kiện nhấn, bạn phải ngăn máy trạng thái búa của phụ huynh nhận được sự kiện chạm ban đầu. Nói chung, gọi số event.stopPropagation() cũng sẽ ngừng tuyên truyền sự kiện ban đầu. Tuy nhiên, sự kiện tap của hammer.js được kích hoạt trên touchend nhưng originalEvent là sự kiện được lưu trong bộ nhớ cache touchstart. Do đó, việc dừng tuyên truyền trên sự kiện ban đầu không có hiệu lực bởi vì sự kiện touchstart từ lâu đã sôi nổi thông qua DOM.

Giải pháp? Tôi tin rằng đây là lỗi trong búa - gửi yêu cầu kéo sửa lỗi originalEvent trong sự kiện nhấn. Khi những người khác đã đề xuất bạn có thể kiểm tra mục tiêu của sự kiện, nhưng đó luôn là yếu tố gốc - một lỗi khác theo ý kiến ​​của tôi. Vì vậy, thay vào đó hãy kiểm tra event.originalEvent.target. Dưới đây là một số JS fiddle với giải pháp tầm thường này được triển khai: http://jsfiddle.net/HHRHR/

Answer 2

Nếu bạn không thể làm việc này .. chỉ cần gọi phương thức khác trên vòi nước sau khi xác minh cần thiết (arguments.callee là nơi tôi sẽ bắt đầu trong trường hợp này), điều này sẽ có những lợi ích gia tăng của cho phép người dùng khác treo nút cũng ...

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 
}); 

Answer 3

Bạn có thể thử kiểm tra e.currentTarget (hoặc là nó e.target?) bên trong handler cha mẹ để tìm ra các yếu tố được khai thác ; nếu đó là phần tử con thì chỉ cần quay lại ngay lập tức, tiếp tục với hàm.

Answer 4

Vì tôi không thể nhận được tác phẩm này, tôi đã sử dụng một biến để biết sự kiện con đã được kích hoạt chưa. Nó hoạt động khá tốt với jGestures (Tôi chưa thử với 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'); 
}); 

Answer 5

Tôi gặp sự cố tương tự với sự kiện chạm.

Tôi giải quyết nó bằng cách sử dụng

return false; 

mà là giống như gọi e.preventDefault(); e.stopPropagation();