麻煩處理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事件目標

回答

相關問題