jquery mobile event.preventdefault（）不起作用

Posted 2023-02-22

【中文标题】jquery mobile event.preventdefault（）不起作用

【英文标题】：jquery mobile event.preventdefault() not working

【发布时间】：2016-01-16 06:35:56

【问题描述】：

奇怪的问题，显然在 jquery mobile 中并不少见。我有一个包含两项的列表视图弹出窗口，旨在允许用户通过<a href="someurl.com"> 切换视图。每个选项都旨在在同一页面上显示 json 数据。我不希望href 将查看者带到另一个页面，所以我尝试使用event.preventdefault()。

但经过大量研究，我仍然无法阻止 href 跳转到 google.com，即使（我认为）我正确使用了 event.preventdefault();。

这是相关的html：

<div data-role='popup' id='popupSwitchView' data-theme='none'>
    <ul data-role='listview'>
        <legend>Choose a view</legend>
        <li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='ui-btn-active switchview' id='ABC' name='theView' value='ABC'>ABC</a>
        </li>
        <li><a href='http://google.com' data-role='button' data-transition='fade' data-mini='true' class='switchview' id='DEF' name='theView' value='DEF'>DEF</a>
        </li>
    </ul>
</div>

...这里是jquery：

$('#DEF').on('click', function () 
    event.preventDefault();

我想知道这是否是我使用选择器的方式，但我用相同的代码here 测试了选择器，看来我的选择器没问题。

Chrome 控制台未显示任何错误。对我在这里缺少的东西有什么想法吗？

编辑

我忽略了上面的 html 和 jquery 是 php 变量$html_jq 的一部分，它是从另一个 php 文件中回显的。

即file1.php 与$html_jq 相呼应，file2.php 中定义。

【问题讨论】：

你需要把 --event -- 放在括号内，这样它就会被拾取 -- $('#DEF').on('click', function (event) -- 也可以试试-- event.stopImmediatePropagation() -- 它阻止其余的处理程序被执行并防止事件在 DOM 树中冒泡。

@Tasos 谢谢，是的，试过了——也试过 $('#DEF').on('click', function (e) e.event.preventDefault();...都没有工作。不幸的是 event.stopImmediatePropagation() 也没有。

是的，它们并不总是有效。您可以做的是设置一个标志，例如 onclick 您将一个变量设置为 on 状态。然后将超时设置为一秒左右以将开启状态清除为关闭。现在在您的其他点击功能中检查 - 如果状态处于打开状态，则不要运行代码。这是一种解决方法，效果很好

再次感谢。我的编辑可能会对此有所了解（即 html 和 jq 位于正在回显的 php 变量中）。我昨天不认为它是相关的，但我开始怀疑它是

我总是这样使用：$('#DEF').on('click', function(event) event = event || window.event; event.preventDefault(); );

【参考方案1】：

截至目前，当您尝试将 JQM 1.4.5 与 Jquery 2.1.4 之后的任何内容一起使用时，就会出现此问题

见Jquery mobile github

【参考方案2】：

我认为答案的一部分（可能是 0.01%）。选择器没有抓取任何东西，这解释了不合作的行为。我认为这意味着 jquery mobile 和 jquery 本身正在幕后处理这个事件，他们指的是别的东西，显然不是我的选择器。

正如this stack question 中所建议的那样，我深入研究了当您单击该链接时实际发生的情况，这很奇怪。

即，在 Chrome 开发者工具Source 选项卡中选中“点击” -> Event Listener Breakpoints -> Mouse -> Click 然后点击 f11 直到它停止跳来跳去，我发现似乎成为一个不可避免的While 循环，其中事件被挂断。该 While 循环似乎位于第 4541 行的 jquery-2.1.1.js 中。

这是一些有趣的幕后东西，在某些时候会证明非常有价值，但我不确定在这里做什么。有什么建议吗？