麻烦处理JQuery事件目标

我想为我的按钮创建一个通用处理程序，但以下代码似乎无法识别事件目标，而是吐出了target.toString（）==当前页面的URL？麻烦处理JQuery事件目标

HTML：

<a id="button1" href="#"></a> 
<a id="button2" href="#"></a>

的jQuery/JavaScript的：

function myHandler(e) { 

    if (e.target == $("#button1")) 
     alert("Button 1 clicked"); 
    else if (e.target == $("#button2")) 
     alert("Button 2 clicked"); 
    else 
     alert(e.target.toString()); 
} 

$("#button1").click(myHandler); 
$("#button2").click(myHandler);

来源

2010-11-16 Yarin

function myHandler(e) { 

    if (e.target.id == "button1") 
     alert("Button 1 clicked"); 
    else if (e.target.id == "button2") 
     alert("Button 2 clicked"); 
    else 
     alert(e.target.toString()); 
} 

$("#button1").click(myHandler); 
$("#button2").click(myHandler);

你的代码不能工作，因为你的目标事件与jQuery对象

活生生的例子比较：http://jsfiddle.net/fcalderan/7b53z/

来源

2010-11-16 16:53:14

fcalderan-非常感谢jsfiddle示例 - 甚至不知道该网站。 – Yarin 2010-11-16 17:20:40

您的代码存在两个问题。

你错过了#对于IDS的myHandler内。
您比较DOM元素e.target使用jQuery对象$('..')。

使用

function myHandler(e) { 

    if (e.target == $("#button1")[0]) 
     alert("Button 1 clicked"); 
    else if (e.target == $("#button2")[0]) 
     alert("Button 2 clicked"); 
    else 
     alert(e.target.toString()); 
}

来源

2010-11-16 16:54:05

谢谢 - 1是我的代码的错误副本，我修正了它。 2 - 我以为我会得到一个JQuery.Event对象，并且.target属性与$（''）引用的引用类型相同？ – Yarin 2010-11-16 17:04:21

@Yarin，看看http://api.jquery.com/category/events/event-object/他们提到一些属性已经被标准化为*跨浏览器一致性*。也请看http://api.jquery.com/event.target/ **说明：** *发起事件的DOM元素* – 2010-11-16 17:12:25

非常感谢你和fcalderan的回答都很好，但我把它给了他为了第一。 – Yarin 2010-11-16 17:20:03

我已经创建的jsfiddle演示 - here

，并从下面的演示代码：

的JavaScript：

$(document).ready(function(){ 

    function eventHandler(e){ 
    var clicked = $(e.target); 

    // will check if element is or is a child of event target   
    if (clicked.is('#btn1') || clicked.parents().is('#btn1')) 
     console.log("btn1 was clicked"); 
    else if(clicked.is('#btn2') || clicked.parents().is('#btn2')) 
     console.log("btn2 was clicked"); 
    } 

    $('#btn1').bind('click', function(e){ 
    eventHandler(e); 
    return false; 
    }); 

    $('#btn2').bind('click', function(e){ 
    eventHandler(e); 
    return false; 
    }); 

});

HTML：

<button id="btn1">Button #1</button> 
<button id="btn2">Button #2</button>

希望这会有所帮助。如果你需要一个非jQuery版本让我知道。

来源

2010-11-16 17:55:39 Kieran

麻烦处理JQuery事件目标

回答

相关问题