Неполадки при работе с целями событий JQuery

Question

Я пытаюсь создать универсальный обработчик для моих кнопок, но следующий код, похоже, не распознает цели события, а вместо этого выплевывает target.toString () == URL текущей страницы?

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);

Answer 1

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/

Answer 2

Две проблемы с вашим кодом.

1. вы пропустили # для идентификаторов внутри вашего myHandler.
2. вы сравниваете элементы 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());
}

Answer 3

Я создал демо с jsFiddle - здесь

и код из демоверсии ниже:

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 версия, дайте мне знать.