Question

我已经在我的页面的一部分上实现拖放，我将一个元素拖到画布上。这工作正常，但在我实现了css悬停的页面的完全不同的部分，悬停效果得到激活。这部分页面的html结构是....

        <div class="horizMenu" id="frames" style="width:700px " >
            <!--Frame mini Canvases will be inserted here  -->
            <span id="NewFrameInputSpan"> 
                <ul id="NewFrameInputUL" >New Frame
                    <li  onmouseup="window.alert('?');">Empty</li>
                    <li onmouseup="window.alert('?');">Copy</li>
                    <li onmousedown="window.alert('hi');" onmouseup="window.alert(e)">Smart</li>
                </ul>
            </span>
        </div>

这个CSS就是

.horizMenu{
    color:#93a1a1; 
    background-color:#fdf6e3;   
}
.horizMenu span{
    display: inline-block;
    width: 80px;
}
#NewFrameInputSpan{
    bottom: 1.5px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.horizMenu:hover #NewFrameInputSpan{ opacity: 1;  }

如何从两个不同的元素拖放javascrit会导致悬停事件在完全不同的第3个元素中触发。所有这些元素都是兄弟姐妹BTW，而不是父母/孩子。当我释放悬停（鼠标向上）时会触发此悬停效果。注意我向li元素添加了onmouseup / onmousesdown警报。他们没有被召唤。这似乎只发生在Safari / Chrome上，而不是Opera上（没有尝试过其他人）。 webkit中拖放有任何已知问题吗？

Answer 1

嗯，我解决了我的问题，但只是通过一个黑客的工作。我将div包装在一个div中，然后选中指针事件，以确保只有当鼠标实际位于div上时才接受鼠标输入...

<div onmouseover="document.getElementById('frames').style.pointerEvents = 'auto';" onmouseout="document.getElementById('frames').style.pointerEvents = 'none';"  >
     <div class="horizMenu"  id="frames" style="width:700px; pointer-events:none; "   >
         <!--My Content here-->
     </div>
</div>

~~这不会阻止错误的掉落事件击中我的div，它只是让我的div忽略它们。如果有人有更好的解决方案，我想在这里。~~

可悲的是，这并没有像我想的那样解决我的问题。它仍然存在。

html css拖拽悬停bug？

1 个答案: