2009-10-23 60 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; 
    };