javascript中的事件處理程序

Question

我有這個片段，我想要做的是當你點擊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>

Answer 1

你可以這樣做：

<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變量不會與代碼中稍后可能具有相同名稱的其他變量沖突。

Answer 2

設置全局標記，當您執行on click事件時將其設置為1.在鼠標輸出事件測試中查看標志是否為1.如果是，則不要更改背景顏色。

Answer 3

添加到元素標記的事件無法實現此目的。 這是一個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>

Answer 4

如果要完全禁用onMouseOver和onMouseOut事件，還可以通過僅添加兩行代碼從中刪除事件處理程序。

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