hammer.js và preventDefault();

Question

js cũng hỗ trợ cử chỉ cảm ứng. Tôi đang đóng vai trò của tôi về ngăn chặn hành động mặc định. khi tôi đặt event.preventDefault hoặc event.gesture.preventDefault() hoặc thậm chí áp dụng tham số {prevent_defaults: true } trên búa, nó chỉ kích hoạt hành động mặc định trên neo. Làm thế nào tôi có thể ngăn chặn điều đó và/hoặc tôi đang làm gì sai?

Đoạn mã;

function initializeNavigation() { 
    $("nav").hammer({prevent_defaults: true }).on("tap", "a", function(event) { 
     event.preventDefault(); 
     event.gesture.preventDefault(); 
     var target = $(this.hash); 
     scrollToTarget(target, 1200); 
     // if there is an open detailItem then close it. 
     if (detailItemOpen) { 
      $("div." + detailItemOpen).slideUp(); 
     } 
    }) 

    if (Modernizr.mq('only screen and (max-width: 767px)')) { 
     initializeMobileMenuAndSetButton(); 
    } 
} 

Answer 1

Tôi nghĩ bạn cũng có thể thử event.stopPropagation() và event.gesture.stopPropagation(). Nhưng có vẻ như Hammer đưa ra phương pháp đó: event.gesture.stopDetect() cho một trường hợp tương tự.

nguồn: https://github.com/hammerjs/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults

Answer 2

Xét Hammer 2.0+ event.gesture không còn và tổ chức sự kiện, nhưng một đối tượng đơn giản.

event.gesture.srcEvent sẽ không phải là sự kiện thích hợp để dừngPropagation, vì vậy nó sẽ không hoạt động.

Nếu bạn đang sử dụng sự kiện tap và muốn ngăn nhấp chuột/nhấn vào tài liệu, bạn có thể làm điều gì đó như thế này. Chúng ta cần phải tạo ra một vòi xử lý toàn cầu sẽ dần thay thế các phương pháp gốc stopPropagation và preventDefault

function createHandler(event) { 
 
    return { 
 
    isHandled: false, 
 
    _shouldStopPropagation: false, 
 
    _shoulePreventDefault: false, 
 
    stopPropagation: event.stopPropagation.bind(event), 
 
    preventDefault: event.preventDefault.bind(event), 
 
    } 
 
} 
 

 

 
function handleEvent(handler, node) { 
 
    let clickHandler; 
 

 

 
    if (!handler.isHandled) { 
 
    handler.isHandled = true; 
 
    document.addEventListener('click', clickHandler = (event)=> { 
 
     if (handler._shouldStopPropagation) { 
 
     handler.stopPropagation(); 
 
     event.stopPropagation(); 
 
     } 
 
     
 
     if (handler._shoulePreventDefault) { 
 
     handler.preventDefault(); 
 
     event.preventDefault(); 
 
     } 
 
     document.removeEventListener('click', clickHandler, true); 
 
    }, true); 
 
    } 
 
} 
 

 

 
// Create a global tap Event so we can replace the original functions 
 
document.addEventListener('tap', (event)=> { 
 
    let handler = createHandler(event); 
 

 
    event.stopPropagation = function() { 
 
    handler._shouldStopPropagation = true; 
 
    handleEvent(handler); 
 
    }; 
 
    event.preventDefault = function() { 
 
    handler._shoulePreventDefault = true; 
 
    handleEvent(handler); 
 
    } 
 
}, true); 
 

 
// Now we can use it. 
 
document.addEventListener('tap', (event)=> { 
 
    /* If you want to prevent Default */ 
 
    event.preventDefault(); 
 

 
    /* If you want to stop propagation */ 
 
    event.stopPropagation(); 
 

 
    /* If you want to do both */ 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
});