事件映射位置在非文本字段

Question

文本的位置是有辦法的事件（「地圖像這樣的元素

<div>Just normal text</div> 

上點擊事件的位置中包含的文本你只是點擊第6個字符「，當擊中'n'）？

Answer 1

我不知道有什麼可實現的方法，但我得到了一個可行的解決方案，雖然它很醜。

您可以將div文字的每個字母包裝在可以說的span元素中，併爲每個字母添加唯一的標識符。然後，你會爲這些span元素掛上事件處理程序，而不是整個div，並根據跨度id分辨出哪個字符是那個。

這整個事情可以在JS中完成，但正如我所說，這不是理想的解決方案。

下面是示例（我已經爲div添加了一個test id，所以我可以更容易地找到它）。

var letters = $('#test').text(); 
var spans = ''; 
for (var i = 0; i < letters.length; i++) { 
    spans += '<span id="id' + i + '">' + letters[i] + '<span>'; 
} 
$('#test').html(spans); 

$('span[id^=id]').click(function() { 
    alert('Clicked char: ' + (Number($(this).attr('id').substring(2)) + 1)); 
    return false; 
}); 

您也可以試試我的demo。

Answer 2

不是這樣;我猜你必須將每個字符分成<span>元素，無論是在服務器端還是使用JQuery。

Answer 3

這是一種可能可以發揮作用的方式：它包括暫時使文檔可編輯並檢查選擇。它應該在Firefox 3 +，IE 6+，最近的Safari和Chrome中運行。

目前的情況是，有一些問題，我可以看到：

• 在IE的結果是其他瀏覽器不同：IE計數在整個含元素直到而其他瀏覽器插入符的所有字符在包含文本節點的範圍內給出偏移量，但是您可以繞過此操作;
• 將出現邊框圓在某些瀏覽器
• 當前元素在Opera或Firefox 2不工作，和葉記錄其他UI毛刺的編輯
• 可能性：它是一個討厭的黑客行爲。

代碼：

window.onload = function() { 
    var mouseDownEl; 

    document.onmousedown = function(evt) { 
     evt = evt || window.event; 
     var el = evt.target || evt.srcElement; 
     if (evt.srcElement || !("contentEditable" in el)) { 
      document.designMode = "on"; 
     } else { 
      el.contentEditable = "true"; 
     } 

     mouseDownEl = el; 
    }; 

    document.onclick = function(evt) { 
     evt = evt || window.event; 
     var el = evt.target || evt.srcElement; 
     if (el == mouseDownEl) { 
      window.setTimeout(function() { 
       var caretPos, range; 
       if (typeof window.getSelection != "undefined") { 
        caretPos = window.getSelection().focusOffset; 
       } else if (document.selection && document.selection.createRange) { 
        range = document.body.createTextRange(); 
        range.moveToElementText(el); 
        range.collapse(); 
        range.setEndPoint("EndToEnd", document.selection.createRange()); 
        caretPos = range.text.length; 
       } 

       if (el.contentEditable == "true") { 
        el.contentEditable = "false"; 
       } else { 
        document.designMode = "off"; 
       } 
       alert(caretPos); 
      }, 1); 
     } else { 
      if (mouseDownEl.contentEditable == "true") { 
       mouseDownEl.contentEditable = "false"; 
      } else { 
       document.designMode = "off"; 
      } 
     } 
     mouseDownEl = null; 
    }; 
};