防止 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>

我想阻止clicked() 函数触发，该函数附加到内联onclick 属性。我想运行我的 jquery click 函数，如果出现问题，我不想触发 onclick，但它总是运行 clicked() 函数。任何人都可以帮助我。任何帮助是极大的赞赏。

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>

Answer 2

试试event.stopPropagation() api docs

Answer 3

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

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

        //do something
    });
}


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

Answer 4

我正在分享一个快速解决方法，但不知道为什么您无法添加逻辑来停止添加您所说的自动添加的“onclick="clicked();”代码。

我建议您隐藏 id 为“btn1”的按钮。添加样式显示：无。您不需要为此准备就绪功能，只需将样式属性添加到按钮 btn1 或者如果这也无法直接使用，则使用 jQuery 来准备好发布文档。 读 ： How to change css display none or block property using Jquery?

然后使用 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
 });

如何注册新按钮的点击事件请参考以下网址：

Adding click event for a button created dynamically using jQuery jquery - Click event not working for dynamically created button

Answer 5

你不能在一个函数中进行条件检查和 clicked() 逻辑吗？即

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