jQuery “on” preventDefault

"on" preventDefault

提问by mplungjan

What am I missing here?

我在这里缺少什么？

Please note: jQuery MOBILE is used

请注意：使用 jQuery MOBILE

• DEMO using preventDefault

• DEMO using return false

• 使用 preventDefault 的演示

• DEMO 使用 return false

If I use preventDefault the page loads as if I had just links and no script, when I change to return false (which I always used to use on the plain JS onclick event handler), it works as expected. I have already looked through other posts and all use .click and all suggest preventDefault.

如果我使用 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

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>

回答by mas-designs

e.preventDefault();

didn't work ?

没用？

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

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

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

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

Putting e.preventDefault();on the top or on the end of your code does not matter normally. There is also the method e.stop()I guess. But why don't you stick with return false;when it's working for you ?

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

From jQuery mobile documentation:

来自 jQuery 移动文档：

Canceling an elements default click behavior

Applications can call preventDefault() on a vclick event to cancel an element's default click behavior. On mouse based devices, calling preventDefault() on a vclick event equates to calling preventDefault() on the real click event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual click event is dispatched about 300ms after the vclick event is dispatched. For touch devices, calling preventDefault() on a vclick event triggers some code in the vmouse plugin that attempts to catch the next click event that gets dispatched by the browser, during the capture event phase, and calls preventDefault() and stopPropagation() on it. As mentioned in the warning above, it is sometimes difficult to match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding click event by coordinates. There are still cases where both target and coordinate identification fail, which results in the click event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use click for triggering your action.

取消元素默认点击行为

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

function() {
  return false;
}

// IS EQUAL TO

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

Source:http://css-tricks.com/return-false-and-prevent-default/

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

It also seems that .on()isn supported also as document.ready is not supported

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

Source:http://jquerymobile.com/test/docs/api/events.html

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

回答by ddloops

This might provide a solution, but I lack information to explain why. I recently came across the issue where preventDefault was not working in similar code, and the issue lies in delegating from $(document) vs $('body')try the following:

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

<a href="http://stackoverflow.com" id="test1">Test 1</a>
<a href="http://stackoverflow.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>

This does not happen however with jQuery 3.2.1, I can only confirm this is an issue with 2.1.7

但是对于 jQuery 3.2.1，这不会发生，我只能确认这是 2.1.7 的问题