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>