3

我已经在页面的一部分上实现了拖放，我将元素拖到画布上。这很好用，但是在我实现了 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 从两个不同的元素拖放是如何导致悬停事件在完全不同的第三个元素中触发的。所有这些元素都是兄弟姐妹，而不是彼此的父母/孩子。当我释放悬停（鼠标向上）时会触发此悬停效果。请注意，我将 onmouseup/onmousesdown 警报添加到 li 元素。他们不会被召唤。这似乎只发生在 Safari/Chrome 上而不是 Opera 上（没有尝试过其他人）。webkit中的拖放是否有任何已知问题？

4

1 回答 1

0

好吧，我解决了我的问题，但只能通过一个 hacky 解决。我将我的 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>

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

可悲的是，这实际上并没有像我想象的那样解决我的问题。它持续存在。

于 2013-11-11T21:29:56.777 回答