0

我在 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();
};

第三：虽然上述方法有效，但我很想知道如何使用 jQuery 语法来学习上述 #2 方法的方法。 

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

我的#3 解决方案发生的情况是我得到了 Uncaught TypeError: Object [object Window] has no method 'trigger' 错误。

任何提示将不胜感激。

4

2 回答 2

2

如果要在 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);

见小提琴

编辑 ...

也可以更改顺序，以便原始处理程序在 jQuery 中附加的处理程序之后执行：

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

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

见小提琴

于 2012-05-24T06:32:28.147 回答
0

如果我理解你的问题，

这应该工作，

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

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

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

如何使用 jQuery 或 JS 检查事件处理程序是否存在？

编辑

如果你想覆盖 inline 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>

没有“邪恶”评估

（可能并非在所有情况下都有效，只是给了你一个方向）

$(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>
于 2012-05-24T07:17:20.087 回答