当在其包装上创建触摸和鼠标拖动事件时，如何防止锚上的单击事件

How to prevent click event on anchors when making touch and mouse drag events on its wrapper

本文关键字：事件 何防止 单击 鼠标 包装 创建 触摸 拖动      更新时间：2023-09-26

如何防止点击事件锚(重定向到href url，在演示重定向到谷歌)内的一些包装器当使触摸和鼠标拖动事件在这个包装器?使用preventDefault和stopPropagation，我只能限制冒泡DOM，对吗?

我想在拖动时禁用链接，并在不拖动时启用单击。

下面是这个问题的演示。

var items = $('#items');
function start(event) {
    event.preventDefault();
    console.log('touchstart mousedown');
    items.on('touchmove mousemove', move);
    items.on('touchend mouseup', end);
    return false;
}
function move(event) {
    console.log('touchmove mousemove');
    return false;
}
function end(event) {
    console.log('touchend mouseup');
    items
        .off('touchmove mousemove')
        .off('touchend mouseup');
    return false;
}
items.on('touchstart mousedown', start);
https://jsfiddle.net/9oxr4quz/4/

我想出了两个解决方案:

:

触发mousemove事件时，绑定click事件，在事件对象上调用preventDefault，防止浏览器跟随链接。当touchstart和/或mousedown被触发时，关闭jquery点击处理程序。

Javascript: 

var items = $('#items a'); // Notice I changed the selector here
function start(event) {
    event.preventDefault();
    console.log('touchstart mousedown');
    items.off('click');
    items.on('touchmove mousemove', move);
    items.on('touchend mouseup', end);
    return false;
}
...
function move(event) {
    items.on('click', function(event){ event.preventDefault(); });
    console.log('touchmove mousemove');
    return false;
}
...

工作演示:http://codepen.io/anon/pen/WvjrPd

第二:

自己处理点击事件，这样你就可以决定浏览器什么时候应该访问另一个站点，什么时候什么都不做。这可以通过用data-link或data-href属性替换href属性来实现。

现在，当touchstart或mousedown事件被触发时，打开点击事件;如果这些事件中的任何一个导致mousemove事件，则关闭click事件:

HTML: 

<div id="items" class="items">
    <div class="item">
        <a data-link="http://google.com">Anchor</a>
    </div>
    <div class="item">
        <a data-link="http://google.com">Anchor</a>
    </div>
</div>
Javascript: 

var items = $('#items a'); // Notice I changed the selector here
function start(event) {
    event.preventDefault();
    console.log('touchstart mousedown');
    items.on('click', click); // Turn on click events
    items.on('touchmove mousemove', move);
    items.on('touchend mouseup', end);
    return false;
}
function move(event) {
    items.off('click'); // Turn off click events
    console.log('touchmove mousemove');
    return false;
}

…

function click(event) { // Visit the corresponding link
    var link = $(this).attr('data-link');
    alert('Visit link: ' + link);
    // window.location.href = link;
}
items.on('touchstart mousedown', start);
CSS: 

.item {
    background-color: gray;
}
.item + .item {
    margin-top: 10px;
}
.item a {
    cursor: pointer;
    display: inline-block;
    background-color: blue;
    color: white;
    padding: 9px;
    width: 100%;
    height: 100%;
}

工作演示:http://codepen.io/anon/pen/EjmPrJ

在JavaScript中使用禁用所有指针事件的CSS方法，然后在触摸或移动时将它们添加回来。一个简单的方法是这样定义CSS:

a.prevent-me {
   pointer-events: none; /* This line */
   cursor: default;
}

使用jquery添加类和删除类，像下面需要在您的事件。

...
$(".item a").addClass("prevent-me");
...
...
$(".item a").removeClass("prevent-me");
...

所以整个解决方案，我还没有测试过它可能是

var items = $('#items');
function start(event) {
   event.preventDefault();
   console.log('touchstart mousedown');
   $(".item a").addClass("prevent-me"); //remove all click events
   items.on('touchmove mousemove', move);
   items.on('touchend mouseup', end);
   return false;
}
function move(event) {
   console.log('touchmove mousemove');
   return false;
}
function end(event) {
   console.log('touchend mouseup');
   items
     .off('touchmove mousemove')
     .off('touchend mouseup');
  $(".item a").removeClass("prevent-me"); //enable back click
  return false;
}
items.on('touchstart mousedown', start);
相关文章：