2009-10-23 70 views
0

这里来了我的问题我正在注册一些p标签上的dblclick事件,当用户双击此标签时,他可以编辑内容。到目前为止,这是唯一的问题,如果p标签包含其他标签,用户只需点击该标签的内容即可编辑。DOM事件和目标元素

澄清一点这里如果你点击不黄文追逐的一个样本

<html> 
    <head> 
     <title>Test Event</title> 
     <script src="http://www.google.com/jsapi"></script> 
     <script> 
      google.load("jquery", "1.3"); 
      google.setOnLoadCallback(function() { 
       $(function(){ 
        $('#catchme').bind('dblclick', function(e){ 
         alert(e.target.innerHTML); 
        }); 
       }); 
      }); 

     </script> 
     <style> 
      .bk_yellow { 
       background-color: yellow; 
      } 
     </style> 
    </head> 
    <body> 
     <p id="catchme">Lorem ipsum dolor sit amet, <span class="bk_yellow">consectetur adipiscing elit. Phasellus</span> tempor nisl a velit commodo pellentesque. Pellentesque vitae posuere quam. Ut vitae justo nec quam bibendum placerat eu et diam. Morbi nec tellus sit amet libero lacinia vestibulum. Donec vulputate libero eget enim rhoncus dapibus. Sed mattis lobortis est sit amet facilisis. Proin porta lobortis commodo. Sed quis erat a elit malesuada tincidunt at in dui. Nunc sit amet pellentesque odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus dictum justo sed enim pharetra sollicitudin. Cras at tortor ante, at interdum nisi. Proin pulvinar sodales imperdiet. Aliquam mi ipsum, suscipit tincidunt lobortis eget, venenatis nec lorem. Sed euismod enim volutpat nisi vulputate iaculis. </p> 
    </body> 
</html> 

是好的,如果你上的黄色点击跨度仅包含倾倒。有没有办法让dom实际参考事件已经注册的元素?

我在我们的家眉眉CMS使用这种技术,这个bug是一种讨厌。

我想如果没有办法避免这种行为,我将不得不以附加元素事件。

PS:该示例是使用jQuery,但实际的CMS使用ExtJS,所以任何jQuery的具体答案将不会好。

+0

感谢您对我们双方的帮助,对于给予我很好的答案,我有点卡住了,所以让我们对像我这样名声较低的人来说更好! – RageZ 2009-10-23 02:44:57

回答

3

你想e.currentTarget,而不是e.target。 Explanation of the differences;是的,命名很混乱。

+0

确定currentTarget做出了诀窍,现在必须找到我是否可以在ExtJS上获得相同的东西。 – RageZ 2009-10-23 01:56:11

+0

在与ExtJS人交谈后,似乎ExtJS没有相应的功能,所以我必须自行存储一个引用,或者使用function.createDelegate来强制事件函数的参数。 – RageZ 2009-10-23 02:43:59

1

我想你可能想使用萤火虫,看看(e)变量具有哪些属性。

在jQuery的工作原理: alert(e.currentTarget.innerHTML);

而不是e.target.innerHTML

所以,问题是由于您使用了错误的属性,但我之前没有使用过ExtJS,因此我无法提供任何指导。

如果你有做手工,到事件转化为目标,这是我用它来做到这一点:

targetFromEvent = function(e) { 
     var targ; 
     if (!e) { 
      e = window.event; 
     } 
     if (e.target) { 
      targ = e.target; 
     } else if (e.srcElement) { 
      targ = e.srcElement; 
     } 
     if (targ.nodeType == 3) { // defeat Safari bug 
      targ = targ.parentNode; 
     } 
     return targ; 
    };