如何關聯onclick鼠標位置到精確的DOM元素內容？

使用jquery我嘗試創建一個可以執行以下操作的插件：給定一個主要基於文本的任意網頁，如維基百科等。基本上我正在談論瀏覽器呈現的純HTML。現在，如果用戶在網站上的某個地方點擊，就像文本段落中有趣的句子（或單詞）的中間，插件會檢測到該點擊 - 此時我認爲我正在談論一個簡單的onclick事件。如何關聯onclick鼠標位置到精確的DOM元素內容？

我現在想要做的是：插件不僅知道用戶點擊了，而且也知道DOM樹中的確切位置。這意味着例如我想知道點擊與包含字符串AND的span元素相關聯，用戶在字符4和5之間點擊該字符串。

我發現了一個圖像，顯示出相當不錯的what I try to do。

有了這樣的插件，可以做很多事情：突出顯示一些文本，就像從書中學習或創建不同網站上文本段落之間的突出相關... 但目前我只是想着我怎麼能收集所需的可視化數據在瀏覽器中

THX的任何暗示這個

來源

2011-12-01 John Doe

您可以通過使用像開始在文檔的任何地方聽點擊：

$(function() { 
    $(document).click(function(evt) { 
     var elementClicked = evt.target; 
     var xCoordinate = evt.pageX; 
     var yCoordinate = evt.pageY; 

     alert('You clicked a ' + elementClicked.tagName + 
      ' at {' + xCoordinate + ',' + yCoordinate + '}'); 

     // Do work to figure out what the element was and where within it was clicked 
     switch (elementClicked.tagName.toLowerCase()) { 
      case "input": 
      case "span": 
      case "button": 
      case "label": 
      case "select": 
      case "textarea": 
      case "p": 
      ... 
     } 
    }); 
});

問題還有其他事件需要阻止事件傳播到您的「主」點擊處理程序。

Here's a JSFiddle讓你開始。

來源

2011-12-01 22:53:49

從JSFiddle中使用getSelection似乎值得一看。至少Firefox的window.getSelection（）提供了一些有趣的屬性 - 尚不知道哪個能做到 –

如何關聯onclick鼠標位置到精確的DOM元素內容？

回答

相關問題