1

我有这个片段，我想做的是当你点击 div 时，它不会受到 mouseover 和 mouseout 的影响。非常感谢你的帮助。

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

使用它，divandisClicked变量不会与稍后在您的代码中可能具有相同名称的其他变量发生冲突。

于 2013-09-13T07:21:19.677 回答
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 事件，您还可以通过仅添加两行代码从它们中删除事件处理程序。

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