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

您的代码存在两个问题。

您错过了#内的ID的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());
}

Answer 3

我用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版本，请告诉我。

无法处理JQuery事件目标

3 个答案: