mousemove not working on object element

Question

Is there a way to make the mousemove event handler work over an HTML <object> tag? I have HTML like this:

<object type="image/svg+xml" data="myfile.svg"></object>
<img src="myfile.svg"/>

and some JavaScript/jQuery like this:

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

But the mousemove is only working over the img tag. Applying pointer-events: all to object or object * didn't seem to help.

Here is a fiddle.

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

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

img, object {
  width: 100px;
}

<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>

<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"></object>

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

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

Answer 1

Have you tried using onmouseenter? or are there specific things you wish to do when the mouse moves?

if so, I suggest you wrap the object into a inlined div, and add the listener to the div, and set pointer events to none on the object.

See the example below:

$("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"/>