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

2 つの異なる要素からの javascrit のドラッグ アンド ドロップにより、まったく異なる 3 番目の要素でホバー イベントがトリガーされる可能性があるのはどうしてですか。これらの要素はすべて兄弟であり、お互いの親/子ではありません。このホバー効果は、ホバーを離す (マウスを離す) とトリガーされます。onmouseup/onmousesdown アラートを li 要素に追加したことに注意してください。彼らは呼ばれません。これは Safari/Chrome でのみ発生するようですが、Opera では発生しません (他は試していません)。Webkit でのドラッグ アンド ドロップに関する既知の問題はありますか?

4

1 に答える 1

0

さて、私は問題を解決しましたが、ハックな回避策によってのみです。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 がそれらを無視するようにするだけです。誰かがより良い解決策を持っているなら、私はそれをここに置きたいです。

悲しいことに、これは私が思っていたように実際には問題を解決しません。それは持続します。

于 2013-11-11T21:29:56.777 に答える