1

私はこのスニペットを持っています.私がやりたいことは、divをオンクリックすると、マウスオーバーとマウスアウトの影響を受けないことです..ご協力いただきありがとうございます..

<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div>
<script>
function click_div(){
    document.getElementById("div").style.backgroundColor="red";
    }

function over_div(){
    document.getElementById("div").style.backgroundColor="green";
    }

function out_div(){
    document.getElementById("div").style.backgroundColor="white";
    }
</script>
4

4 に答える 4

2

次のようなことができます。

<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div>
<script type="text/javascript">
var isClicked = false;
function click_div(){
    isClicked = true;
    document.getElementById("div").style.backgroundColor="red";
    }

function over_div(){
    if(!isClicked )
        document.getElementById("div").style.backgroundColor="green";
    }

function out_div(){
    if(!isClicked )
        document.getElementById("div").style.backgroundColor="white";
    isClicked = false;
    }
</script>

ただし、グローバル変数を使用することはお勧めできません。クロージャーの概念を理解している場合は、代わりに次のようなものを使用できます。

<div id="div" style="width:100px; height:100px; border:2px solid black"></div>
<script type="text/javascript">
(function()
{
    var div = document.getElementById("div");
    var isClicked = false;
    div.addEventListener("click", function() {
        div.style.backgroundColor = "red";
        isClicked = true;
    });
    div.addEventListener("mouseover", function() {
        if(!isClicked)
           div.style.backgroundColor = "green";
    });
    div .addEventListener("mouseout", function() {
        if(!isClicked)
           div.style.backgroundColor = "white";
        isClicked = false;
    });
}
)();
</script>

これを使用すると、divおよびisClicked変数は、コード内で後で同じ名前を持つ可能性のある他の変数と競合しなくなります。

于 2013-09-13T07:21:19.677 に答える
1

グローバル フラグを設定し、オン クリック イベントを実行するときに 1 に設定します。マウス アウト イベントで、フラグが 1 かどうかをテストします。1 の場合は、背景色を変更しないでください。

于 2013-09-13T07:21:33.803 に答える
1

要素のタグに追加されたイベントではこれを達成できません。これは、必要に応じて機能するjsfiddleです。

http://jsfiddle.net/krasimir/Ru5E5/

Javascript:

var element = document.getElementById("div");
var isClicked = false;
element.addEventListener("click", function() {
    isClicked = true;
    element.style.backgroundColor="red";
});
element.addEventListener("mouseover", function() {
    if(isClicked) return;
    element.style.backgroundColor="green";
});
element.addEventListener("mouseout", function() {
    if(isClicked) return;
    element.style.backgroundColor="white";
});

HTML

<div id="div" style="width:100px; height:100px; border:2px solid black"></div>
于 2013-09-13T07:21:58.463 に答える
0

onMouseOver および onMouseOut イベントを完全に無効にする場合は、2 行のコードを追加するだけでイベント ハンドラーを削除することもできます。

<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div>
<script>
function click_div(){
    document.getElementById("div").style.backgroundColor="red";
    // Disable the other two events
    document.getElementById("div").onmouseover=null;
    document.getElementById("div").onmouseout=null;
}

function over_div(){
    document.getElementById("div").style.backgroundColor="green";
}

function out_div(){
    document.getElementById("div").style.backgroundColor="white";
}
</script>
于 2013-09-13T08:14:53.923 に答える