1

ボタン内のテキストの一部を表示/非表示にしようとしています。ボタンは

<button id="SOS" onmouseover="show()" onmouseout="hide();">
    <p>S.O.S</p>
    <div id="sos_left"> <?=$text_to_show_hide?></div>
</button>

そしてjavascriptコードは

<script type="text/javascript">
function show()
    {
        sos_left=document.getElementById('sos_left');
         alert("mouseover");
         sos_left.style.color = "red";
         sos_left.style.fontSize = "28";

    }
function hide(){

       sos_left=document.getElementById('sos_left');
       alert("mouseout");
       sos_left.style.color = "blue";
       sos_left.style.fontSize = "0";
}
</script>

問題は、私がマウスオーバーしているときでも、マウスアウトが警告を発するということです。

注：サイトはvbulletinベースであり、テンプレートの1つでこのコードを使用しているため、jqueryを使用できません。

4

3 に答える 3

3

問題はmouseover、mouseoutイベントがバブルアップすることです。これは、ボタンの子孫である要素にカーソルが出入りすると、ボタンで定義されたイベントリスナーもトリガーされることを意味します。

できることは、イベントを生成した要素が実際に要素であるかどうかを確認することです<button>。次のようにDOMを修正します。

<button id="SOS" onmouseover="show(event)" onmouseout="hide(event);">...

次に、JSコード：

function show(e) {
    if ((e.target || e.srcElement).id !== "SOS") return;
    ...

function hide(e) {
    var tgt = e.target || e.srcElement;
    if (tgt.id !== "SOS") return;
    // If the cursor enter in one of the descendants, mouseout is fired, but
    // we don't want to handle this
    if (tgt.contains) {
        if (tgt.contains(e.relatedTarget || e.toElement)) return;
    } else if (this.compareDocumentPosition)
        if (tgt.compareDocumentPosition(e.relatedTarget)
                & Node.DOCUMENT_POSITION_CONTAINS) return;
    ...

Internet Explorer（そして現在Operaでも）にはこれらのイベントがあり、それらはmouseenter非常mouseleaveによく似た動作をしますが、バブルにはなりません。他のブラウザの場合、jQueryなどの一般的なフレームワークでエミュレートされます。

最後に、従来の方法よりも新しい方法を使用してイベントリスナーをアタッチすることをお勧めします。さらに、定義する方法はsos_left、それがグローバル変数になることを意味します。var定義の前にキーワードを使用します。

于 2012-06-10T08:19:25.323 に答える
0

あなたは何も隠さないでください。

display:none要素を「削除」するか、要素を非表示にするために使用しvisibility:hiddenます。

要素を「再追加」するには、可視性属性を使用して非表示にした場合は、display: blockまたはを使用します。visibility:visible

それぞれを試して、違いを確認してください。

もう一つの問題は、

変数として使用しようとしましsos_leftたが、変数として宣言していません。

var sos_leftの代わりに使用してください。

于 2012-06-10T07:56:45.870 に答える
0

これは、イベントをではdivなくに適用するためですbutton。これを試して：

sos_button=document.getElementById('SOS');
于 2012-06-10T08:09:50.453 に答える