javascript - 如何检测被覆盖元素的鼠标悬停事件

Question

我有一些 <mark>在<textarea>下.当我添加 mouseover <mark> 的听众, 事件不会触发，因为它们在 <textarea> 下.

我做不到pointer-events: none对于 <text-area>因为我希望它正常工作。

请不要使用 jQuery。

https://jsfiddle.net/aewc13nm/

Answer 1

我假设您正在尝试找到一个独立于 css 和元素/兄弟元素分层的解决方案。在那种情况下，我可以想出一种方法来重建自定义鼠标悬停/移出。它的工作原理是在窗口上监听全局鼠标移动，并用 ~17ms 检查我们是否跨越了标记元素的边界(我结合了自定义事件，以防你有更复杂的嵌套元素，这不是必需的):

FIDDLE

我添加了随机数学，以便您可以识别不同的鼠标悬停/移出。

!function(){
  var mark = document.getElementsByTagName("mark")[0],
        mouseout = true,
      mouseover = false,
      customMouseEvent = new CustomEvent(
        "customMouseEvent",
        {
            bubbles:false,
          detail:{
            mouseout:function(){return mouseout},
            mouseover:function(){return mouseover}
          }
        }
        );
      mark._lastGesture = "mouseout";
    window.addEventListener("mousemove",function(e){
    if(mark._busy){return}
    mark._busy = true;
    window.requestAnimationFrame(function(){
      var rect = mark._rect || (mark._rect = mark.getBoundingClientRect());
      if(
        (e.clientX - rect.left < rect.width)
        && (e.clientX - rect.left > 0)
        && (e.clientY - rect.top <= rect.height)
        && (e.clientY - rect.top > 0)
      ){
        mouseout = false;
        mouseover = true;
      } else {
        mouseout = true;
        mouseover = false;
      }
      mark.dispatchEvent(customMouseEvent);
      mark._busy = false;
      setTimeout(function(){delete mark._rect},17);
    });
  });
  mark.addEventListener("customMouseEvent",function(e){
    if(e.detail.mouseover() && this._lastGesture !== "mouseover") {
        this._lastGesture = "mouseover";
        document.getElementById("feedback").textContent = "Mousover! " + Math.random();
    } else if (e.detail.mouseout() && this._lastGesture !== "mouseout") {
        this._lastGesture = "mouseout";
      document.getElementById("feedback").textContent = "Mousout! " + Math.random();
    }
  })
}();