Question

在我的应用程序中，我有很多锚标签和按钮，其中大多数都有onclick在元素上调用的事件。

我想要的是在调用任何其他函数之前调用函数。

HTML

<input type="button" value="add" onclick="add()">
<input type="button" value="sub" onclick="sub()">
<input type="button" value="div" onclick="div()">

JS

function add(){
alert("add");
}
function sub(){
alert("sub");
}
function div(){
alert("div");
}

$(document).on("click","input[type=button]",function(){
alert("bye");
});

这里是小提琴fiddle

我认为

$(document).on("click","input[type=button]",function(){
....
});

首先会调用

，以便我可以在

之前处理一些事情

function show(){
    alert("hi");
    }

被调用，但事实并非如此。应该怎么做才能做到这一点。

我想在所有锚标签和按钮上调用 a 功能，甚至在

之前

的onclick =＆＃34;显示（）＆＃34;

更新

我更新了小提琴

P.S

每个元素都有自己的函数来调用，但是$（document）中的函数与我想要对所有被过滤的元素调用的函数相同。我有一些建议，为什么不创建一个具有$（document）逻辑的函数，并在所有由元素调用的函数上调用它，即add（），sub（），div（）。但是ans不是我不能，因为它只是一个演示我的实际应用程序退出大而无法计算每个函数并调用其他函数。这就是为什么我想要一个替代品。

Answer 1

首先会调用

onclick attr，因为它在元素上有直接事件这是怎么回事，但你可以对函数本身的事件进行一些操作这是一种你可以实现你想要的方式，但正如我在评论中说的那样有点混乱：

<!DOCTYPE HTML>
<html ng-app>
  <head>      
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js" type="text/javascript"></script>
  <title></title>
  </head>
  <body>
  <a id="click" onclick="show(this);">c</a>
  <script type="text/javascript">
  function show(t){
    events = $._data(document, 'events');
    events.click[0].handler();
    alert("hi");
    $(document).off("click","#click");
}

$(document).on("click","#click",function(){
  alert("bye");
});
</script>
  </body>
</html>

基本上你在这里做的是在你执行你的onclick函数逻辑之前调用其他处理程序，换句话说你从onclick调用其他处理程序这个代码可以工作，但你应该使用一些过滤器来处理你正在寻找和运行的事件每个事件的循环

另一种方法是你可以保存onclick值并将其附加到你自己的事件中然后删除onclick attr val：

http://jsfiddle.net/qmbcgz5y/11/

function add(){
alert("add");
}
function sub(){
alert("sub");
}
function div(){
alert("div");
}
function firstfunction(){alert('first func');}

    $(function(){
        $("input[type=button]").each(function(){
          var onclickfunc = $(this).attr('onclick');
          $(this).attr('onclick','');
          $(this).on('click',function(){
           firstfunction();
           eval(onclickfunc);
         });
    });
    });

Answer 2

您可以通过在onclick（）事件上调用2个方法来使用简单的解决方案，如下所示：

function show(){
alert("hi");
}

function first(){
alert("bye");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a id="click" onclick="first();show();">Click Me!</a>

Answer 3

javascript代码

function show() {
  function_two(); // considering the next alert, I figured you wanted to call function_two first
  alert("hi");
}

function function_two() {
  alert("bye");
}

html代码

<input type="button" value="click" onclick="show()">

Answer 4

为什么不在同一事件上拥有所有功能？

<强> HTML

<input type="button" value="click" >

<强> JS

$(document).on("click","input[type=button]",function(){
   // call first function
   callToFirstFunction();

   // continue here with other code
});

Answer 5

您正在尝试捕获与冒泡事件处理，这是非常好的解释here。

如果您不关心IE＆lt; = 8，您可以在文档上分配事件处理程序以在捕获阶段执行。但是，您必须使用addEventListener()方法分配事件处理程序，因为这不能通过jQuery完成。

// third parameter must be true to set event to capturing phase
document.addEventListener('click', function(event) {
    // get the real target of the click event
    $target = $(event.target);

    // if it was a button, do your work
    if ($target.is('input[type="button"]')) {
        alert("bye");
    }
}, true);

如果您确实需要支持IE＆lt; = 8，那么将需要其中一个解决方法。

为什么点击事件首先被onclick on元素调用，而不是$（document）.on（＆＃39;点击＆＃39;）？

5 个答案: