在图像地图上随机触发onmouseover和onmouseleave [英] onmouseover and onmouseleave triggering randomnly on image map
问题描述
我在onmouseover和onmouseleave事件方面遇到问题.这段代码可能仅在5%的时间内有效,我不明白为什么.当我将鼠标悬停在图像地图上时,只需看着控制台即可.它会触发onmouseover,然后触发onmouseleave,然后再次触发onmouseover.如果我注释掉引导模式显示和隐藏,则图像只是交换并正常触发事件.我不知道这是引导模态还是什么问题,但是我在同一页面上有两个正常触发的号召性用语按钮.任何帮助是极大的赞赏.
I'm having an issue with onmouseover and onmouseleave event. This code only works maybe 5% of the time and I don't understand why. Just looking at the console when I hover over the image map. It triggers the onmouseover then the onmouseleave and then onmouseover again. If I comment out the bootstrap modal show and hide then the image just swaps and triggers events normally. I don't know if this is an issue with bootstrap modals or what but I have two call to action buttons on the same page that trigger normally. Any help is greatly appreciated.
这是我的jQuery
function openAutomation(){
console.log("openAutomation");
$('#image-map').attr('src', automation);
$('#automationModal').modal('show');
};
function openIntegration() {
console.log("openIntegration");
$('#image-map').attr('src', integration);
$('#integrationModal').modal('show');
};
function closeAutomation(){
console.log("closeAutomation");
$('#image-map').attr('src', original);
$('#automationModal').modal('hide');
};
function closeIntegration() {
console.log("closeIntegration");
$('#image-map').attr('src', original);
$('
这是我的HTML代码:
<map name="image-map" class="image-map-class">
<area class="automation-map" onmouseover="openAutomation()" onmouseleave="closeAutomation()" coords="304,559,1011,148,1143,229,1518,447,1516,485,1463,497,1444,510,1436,522,1241,636,1159,716,1076,762,959,801,813,884,494,696,304,589" shape="poly">
<area class="integration-map" onmouseover="openIntegration()" onmouseleave="closeIntegration()" coords="1571,477,1456,494,1418,566,1088,756,871,881,868,916,1006,993,1229,1074,1274,1063,1348,1021,1483,944,1629,856,1793,761,1848,732,1881,701,1879,686,1703,551" shape="poly">
</map>
推荐答案
Ok设法找到了一种适用于此的解决方案,因此对于使用在图像映射内部使用Bootstap Modal以及内部区域使用onmouseleave和onmouseover事件的任何人来说都是如此.然后,您需要使用以下CSS:
Ok managed to get a solution working for this so for anyone using a Bootstap Modal inside an image map with the inner areas using onmouseleave and onmouseover events. Then you need to use the following css:
.modal-backdrop {
pointer-events: none !important;
}
.modal {
pointer-events: none !important;
}
.modal-content{
pointer-events: none !important;
}
基本上没有此设置,它将在onmouseover发生时立即触发onmouseleave,然后再次触发onmouseleave.我真的希望这对某人有帮助,但是我觉得这对本网站来说非常具体
Basically without this it triggers onmouseleave as soon as onmouseover happens and then retriggers onmouseleave again. I really hope this helps someone but I feel like this was very specific for this Website
这篇关于在图像地图上随机触发onmouseover和onmouseleave的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!