Question

当前代码

<a onclick="callMe1()">Click Me</a>
<a onclick="callMe2()">Click Me 2</a>

function callMe(){
   //anything
}

function callMe2(){
   //anything
}

依此类推......我有数百个onclick事件函数。

我想添加这个函数，它应该在任何onclick事件函数之前调用。

function callBeforeAnyOnClick(){
//This should be executed before callMe() and callMe2().
//once execution is complete, it should call a function as per onclick event,callMe() or callMe2().
}

任何解决方案？ jquery绑定会在这里工作吗？

Answer 1

您可以调用“调度程序”函数来传递您需要调用的实际函数，例如

<a onclick="callfun(f1)">Click Me</a>
<a onclick="callfun(f2)">Click Me 2</a>

function f1 { console.log("Hello f1"); }
function f2 { console.log("Hello f2"); }

function callfun(f){
   /* do something before */

   if ('function' === typeof f) {
     f();
   }
}

Answer 2

DOM + JS的工作方式，在混合/匹配库（jquery）事件处理和内联脚本事件处理时，不能“劫持”执行顺序。我想到了两件事：

使用mousedown / up事件，该事件将在点击事件之前触发。
加载后使用jquery修改/操作DOM，以便您有更多控制权。

选项＃2的伪示例：

$(function()
{

  $('a[onclick]').click(function() { /* your normal on click here */ });

  // now modify the DOM to convert the onclick attr into a function call
  $('a[onclick]').each(function()
  {
    var clickFunction = $(this).attr('onclick');

    // remove the attr
    $(this).attr('onclick', '');

    // might be a better way than calling eval on the inline function, but this serves its purpose for the demo
    $(this).click(function() { eval(clickFunction); });
  });
});

所以在上面的例子中，我删除了onclick attr并将其转换为jquery click事件处理程序，然后我做第二次，而不是第一次，所以它发生在我新插入的pre-onclick函数之后。

Answer 3

您正在寻找的是观察者模式的经典示例。这在javascript中很难实现，特别是如果将JS与jQuery混合，还因为你想要监听的是事件（本身已经是观察者）。我会在文档上添加一个监听器，只有在为元素定义了onclick函数时才执行它（注意：如果你使用jQuery中的.on添加事件监听器，这将不起作用）：

function observerMethod(e) {
  if (e.target.onclick) {
    ... do your thing here ...
  }
}

document.addEventListener("click", observerMethod, false);

在每个onclick函数之前调用一个公共函数

3 个答案: