鼠标移动不灵对象元素

问题描述：

上有没有一种方法，使mousemove事件处理工作在一个HTML <对象>标签？我有HTML这样的：鼠标移动不灵对象元素

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

和一些JavaScript/jQuery的是这样的：

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

但mousemove只工作在img标签。对object或object *应用pointer-events: all似乎没有帮助。

这里是一个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"/>

如果您选择在SVG的XML元素和应用mousemove事件处理程序会发生什么？或添加一个属性onmousemove =“console.log（'foo'）”？ – Tschallacka

你不能。检查SVG，你会发现'

您是否尝试过使用'onmouseenter'？或者当鼠标移动时你想要做什么？ – Tschallacka

答

的object标签表示不考虑DOM的一部分东西。这样做是为了让用户可以直接与它进行交互。它最初是为Flash等外部应用程序设计的。

请参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

答

您是否尝试过使用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"/>

鼠标移动不灵对象元素

相关推荐