防止 onclick 触发

Question

我在处理html表单提交时遇到了问题，请看下面的代码：

<form id="form1">
 <button id="btn1" onclick="clicked();">Submit</button>
</form>
<script>
    $("#btn1").click(function (event) {
        alert("event triggered");
        if(some_condition == true){
             // stop firing onclick method but it always submits the form
             event.stopImmediatePropogation(); // not working
             event.preventDefault(); // not working
             event.stopPropogation(); // not working it's for bubbled events
         }
     });
     function clicked(){ alert("clicked me"); }
</script>

我希望停止触发与内联onclick属性关联的clicked()函数。 我想运行我的jquery click函数，如果出现问题，我不想触发onclick，但它总是运行clicked()函数。请问有人能帮忙吗？非常感谢任何帮助。

- user3205479

---

clicked() 函数从 onclick 属性中运行 先 吗？如果您正在使用 jQuery，为什么要有内联的 onclick 属性？使用 .click() 函数绑定两个处理程序，无论您首先绑定哪个处理程序，都可以调用 stopImmediatePropagation() 防止第二个处理程序运行。（或将它们合并为一个处理程序。） - nnnnnn

@nnnnnn 抱歉，但 "onclick" 是自动生成的代码，我们无法删除 onclick 事件。如果我们想要添加事件，请通过 jQuery 添加，但我们不能随时删除 onclick。请注意，"onclick" 事件处理程序最后运行。 - user3205479

stopPropogation is a typo, it should be stopPropagation - Yeti

Answer 1

一个 onxyz 处理程序相对于动态附加的处理程序调用的顺序因浏览器而异，因此您的处理程序有可能在原始处理程序之前不被运行。

为了解决这个问题，您可以保存并 删除 onclick 处理程序：

var btn = $("#btn1");
var clickHandler = btn[0].onclick;
btn[0].onclick = false;

然后，在您的处理程序中，如果您想调用该函数，则调用它：

clickhandler.call(this, event);

例子：

// Get the button
var btn = $("#btn1");

// Save and remove the onclick handler
var clickHandler = btn[0].onclick;
btn[0].onclick = false;

// Hook up your handler
$("#btn1").click(function(event) {
  alert("event triggered");
  if (!confirm("Allow it?")) {
    // Disallowed, don't call it
    alert("stopped it");
  } else {
    // Allowed, call it
    clickHandler.call(this, event);
  }
});

// The onclick handler
function clicked() {
  alert("clicked me");
}

<form id="form1" onsubmit="return false">
  <button id="btn1" onclick="clicked();">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

- T.J. Crowder

---

正确。或者更好的方法是，取消内联的 onclick 处理程序并使用单个函数，或者使用 jQuery 绑定两个函数。 - nnnnnn

@nnnnnn：确实。我假设这是将代码添加到某个地方，但由于某种原因他们无法更改HTML。（有很多类似的问题，令人惊讶。） - T.J. Crowder

是的，楼主在回答我的问题下确认了这一点。 - nnnnnn

我也有同样的想法，但我想知道是否有任何解决方法，但我相信它会增加理解代码的额外开销，通过JS将onclick内联附加到HTML并将其设置为false，然后使用.call运行它（另一种方法）。 这不是很困惑吗？对于新手来说，代码可读性可能会很困惑。 - user3205479

@user3205479：你必须做你必须做的事情。如果你一开始就卡在了那个onclick处理程序上，那么这几乎是你唯一可以解决浏览器差异的方法。我不认为代码特别令人困惑，但如果需要，你可以使用注释来帮助后来的人。 - T.J. Crowder

Answer 2

尝试使用 event.stopPropagation() API文档。

- Vinay

---

它不会起作用，它是针对冒泡事件而不是同一元素的。 - user3205479

您注册了两个监听器。 - Vinay

OPе·Із»Џе°қиҮ•иү‡stopImmediatePropagation()пәЊе®ѓеЏҮд»ӨеЃље€°stopPropagation()зљ„ж‰Ђжњ‰еЉџиѓҢ并且ж›өе¤љгЂ‚ - nnnnnn

onclick 不是一个监听器，而是一个附加的处理程序，唯一的方法是设置 onclick = null; 但是如何在不将其设置为 null 的情况下停止从事件监听器触发内联事件呢？ - user3205479

要求是内联 "onclick" 事件，必须存在，这是一个要求。 - user3205479

阅读此线程 https://dev59.com/N3RC5IYBdhLWcg3wK92V - Vinay

Answer 3

如果条件为真，则删除“onclick”属性。

if (some_condition == true) {
    $("#btn1").removeAttr('onclick').click(function(event) {
        alert("event triggered");

        //do something
    });
}


function clicked() {
    alert("clicked me");
}

- ningrixin

Answer 4

我分享一个快速的解决方法，尽管不知道为什么你不能添加逻辑来阻止添加 "onclick="clicked();" 代码，这是自动添加的。

我建议您隐藏 id 为 "btn1" 的按钮。添加样式 display:none。您不需要 on ready 函数，只需将 style 属性添加到按钮 btn1 上，或者如果直接不可能，则使用 jQuery 在文档准备好后进行操作。 阅读： 如何使用jQuery更改css display none或block属性？

然后使用 jQuery 添加一个新按钮到表单中，id 为 "btn2"，并注册 btn2 点击事件。在表单加载完成之后进行此操作。

<form id="form1">
<div id="newbut">
<button id="btn1" onclick="clicked();">Submit</button>
</div>
</form>

jQuery("#newbut").html('<button id="btn2">Submit</button>');
$(document).on('click', '#btn2', function(){ 
     // Your Code
 });

请参考以下网址，了解如何为新按钮注册点击事件：

使用jQuery为动态创建的按钮添加点击事件 jquery - 动态创建的按钮点击事件不起作用

- adang

Answer 5

你不能在一个函数中同时进行条件检查和clicked()逻辑吗？例如：

<script>
 function clicked() { 
     if(some_condition == true){
         return;
     }
     alert("clicked me");
 }
</script>

- Umer Sufyan