Question

我在HTML中有一个简单的按钮：

<input type='button' id='btnPrint' value='Print' onclick="changeStylesheet();" />

此按钮已包含onclick事件处理程序。我想在这里尝试实现的是能够为相同的按钮编写onclick事件处理程序。我想添加第二种跟踪按钮被击中次数的方法。

一些方法：

第一：根据内联事件注册在HTML中附加另一个函数调用。

<input type='button' id='btnPrint' value='Print' onclick='changeStylesheet();trackThis();>' />

这是最简单的方法，但在我的情况下不可行。

第二：抓住onclick事件并检查它是否未定义。然后，使用JavaScript本机语法重新构造具有匿名函数的事件处理程序。

var elem = document.getElementById('btnPrint');
var existingHandler = **elem.onclick ? elem.onclick : function () {};**
elem.onclick = function () {
     trackThis();
     existingHandler();
};

第三：虽然以上方法有效，但我很想学习上面＃2方法的方法，但是使用jQuery语法。

 var elem = $('#btnPrint');
    var existingHandler = **elem.click ? elem.click : function () {};**
    elem.click(function () {
        trackThis();
        existingHandler()
    });

我的＃3解决方案正在发生的事情是我得到的 未捕获的TypeError：对象[对象窗口]没有方法'触发' 错误。

任何提示都将非常感激。

Answer 1

如果要在jQuery中附加两个处理程序，则只需设置两个单击处理程序。在内部，jQuery实现了一个“观察者模式”，它聚合处理程序并按照添加顺序依次执行它们。

$('#btnPrint').on('click', firstHandler);
$('#btnPrint').on('click', secondHandler);

这些陈述不需要是连续的，甚至不必在同一范围内。

如果已在HTML中指定了处理程序，则适用相同的原则。 jQuery将在原始版本之后执行任何其他处理程序。

HTML：

<input type='button' id='btnPrint' value='Print' onclick=".....;" />

jQuery的：

$('#btnPrint').on('click', secondHandler);

请参阅fiddle

编辑......

也可以尊重顺序，使原始处理程序在jQuery中附加处理程序后执行：

var $btnPrint = $('#btnPrint');
var originalHandler = $btnPrint.get(0).onclick;
$btnPrint.get(0).onclick = null;

$btnPrint.on('click', secondHandler);
$btnPrint.on('click', originalHandler);

请参阅fiddle

Answer 2

如果我理解你的问题，

这应该有效，

$('#btnPrint').off("click", "**" ).on('click',function(){
     trackThis();
     existingHandler(); 
})

即。首先off现有的事件处理程序，然后on自定义事件处理程序。

如果这对您没有帮助，可能就是您想要的那个，

How to check if an event handler exist using jQuery or JS?

修改

如果要覆盖内联onclick，可以使用这种脏方法。

jQuery代码：

$(function(){ var mydiv = $('#mydiv'); var inlineClick = mydiv.attr('onclick'); mydiv.removeAttr('onclick').click(function(){ // your code alert('mycode'); eval(inlineClick); // or first do, eval(inlineClick); //then your code later }) }); function inlinefun(){ alert('I am inline function'); }

<强>标记：

<div id='mydiv' onclick='inlinefun();'>Mydiv</div>

没有'evil'eval

（可能不适用于所有情况，只是给了你指示）

$(function(){ var mydiv = $('#mydiv'); // Dirty way to get function name and its args by a string. var inlineClick = mydiv.attr('onclick').split('('); var funName = inlineClick[0]; var args = inlineClick[1].replace(')',''); mydiv.removeAttr('onclick').click(function(){ // your code alert('mycode'); // The default inline function window[funName](args); // you can change the order as you want }) }); function inlinefun(msg){ // I know I am passing string, so removing the quotes, you need a generalised approach here alert(msg.replace('"','')); }

<强>标记：

<div id='mydiv' onclick='inlinefun("I am inline function");'>Mydiv</div>

如何在jquery中访问附加的事件处理程序？

2 个答案:

编辑......