javascript - mousemove 不适用于对象元素

Question

有没有办法让 mousemove 事件处理程序在 HTML

Answer 1

您是否尝试过使用 onmouseenter？还是您希望在鼠标移动时执行特定的操作？

如果是这样，我建议你将对象包装到一个内联div中，并将监听器添加到div中，并将对象上的指针事件设置为无。

请看下面的例子:

$("img, .objectwrap").on("mousemove", function() {
  $("body").css("background-color","#f0f");
});

$("img, .objectwrap").on("mouseleave", function() {
  $("body").css("background-color","transparent");
})

img, object {
  width: 100px;
}
object {
  pointer-events:none;
  }
.objectwrap {
  display:inline-block;
  background-color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Mouse over the images to change the background color.  It doesn't seem to work for the object tag.

<h2>SVG as &lt;object&gt;</h2>

<div class="objectwrap">
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"></object>
</div>
<h2>SVG as &lt;img&gt;</h2>

<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"/>