"on" 防止默认

Question

我在这里缺少什么？

请注意：使用jQuery MOBILE

• DEMO using preventDefault

• DEMO using return false

如果我使用 preventDefault 页面加载，就好像我只有链接而没有脚本一样，当我更改为 return false（我总是在普通的 JS onclick 事件处理程序上使用它）时，它会按预期工作。 我已经浏览过其他帖子并且都使用 .click 并且都建议使用 preventDefault。

$(document).ready(function() {
  $("#leftdiv a").on("click",function(e) {
    $("#rightDiv").load(this.href);
    return false; // I was sure preventDefault would work
  });
});

HTML

<div id="leftdiv" style="position:absolute;padding-right:5%; overflow:scroll;">
<a href="page1.htm">Launch page 1</a><br />
<a href="page2.htm">Launch page 2</a>
</div>

<div id="rightDiv" style="padding-left:30%"></div>

Answer 1

e.preventDefault();

没用？

• http://api.jquery.com/event.preventDefault/

$('a').on("click",function(e){
     //do something
     e.preventDefault();
});

将e.preventDefault(); 放在代码的顶部或末尾通常并不重要。还有e.stop()我猜的方法。但是，当它对您有用时，您为什么不坚持使用 return false; 呢？

来自 jQuery 移动文档：

取消元素默认点击行为

应用程序可以在 vclick 事件上调用 preventDefault() 来取消 元素的默认点击行为。在基于鼠标的设备上，调用 vclick 事件上的 preventDefault() 等同于调用 preventDefault() 在气泡事件阶段的真实点击事件上。基于触摸 设备，它有点复杂，因为实际的点击事件是 在调度 vclick 事件后大约 300 毫秒调度。用于触摸 设备，在 vclick 事件上调用 preventDefault() 会触发一些代码 在尝试捕获下一个单击事件的 vmouse 插件中 在捕获事件阶段由浏览器调度，并且 调用 preventDefault() 和 stopPropagation() 。如中所述 上面的警告，有时很难匹配触摸事件 与其对应的鼠标事件，因为目标可能不同。为了 因此，vmuse 插件也回退到尝试 通过坐标标识相应的点击事件。仍然有 目标和坐标识别都失败的情况， 导致 click 事件被调度并触发 元素的默认操作，或者在内容已被 移动或替换，触发对不同元素的点击。如果 对于给定的元素/控件，这种情况会定期发生，我们 建议您使用 click 来触发您的操作。

function() {
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

来源： http://css-tricks.com/return-false-and-prevent-default/

似乎也支持.on()，因为不支持document.ready

来源： http://jquerymobile.com/test/docs/api/events.html

Answer 2

这可能会提供一个解决方案，但我缺乏解释原因的信息。 我最近遇到了 preventDefault 在类似代码中不起作用的问题，问题在于从 $(document) vs $('body') 委派尝试以下操作：

<a href="http://*.com" id="test1">Test 1</a>
<a href="http://*.com" id="test2">Test 2</a>
<script>
    $('body').on('click', '#test1', function(e) {
        e.preventDefault();
        alert('hi 1');
    });

    $(document).on('click', '#test2', function(e) {
        e.preventDefault();
        alert('hi 2');
    });
</script>

但是 jQuery 3.2.1 不会发生这种情况，我只能确认这是 2.1.7 的问题