javascript - 如何实现鼠标左键在控下状态并且移出div才改变它的内容！
本文介绍了javascript - 如何实现鼠标左键在控下状态并且移出div才改变它的内容！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<body>
<div id="dv" style="background-color:green;width:120px;
height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
var dv = document.getElementById("dv");
dv.onmousedown = function bs() {
od();
}
function od() {
dv.onmouseout = function() {
displayDate()
};
function displayDate() {
dv.innerHTML = Date();
}
}
</script>
</body>
</html>解决方案
看你代码现在这种做法不大合适，我们走一遍代码，首先触发了mousedown事件之后，你就要执行od方法了，而od方法是给dv添加mouseout事件， 那我多点几次，不就给dv绑定了多几次mouseout事件了？
理一下思路，你可以这样，mousedown事件触发逻辑是：用一个变量来记录鼠标点击了；（比如a=1；）
mouseout事件触发逻辑是：识别变量（约定好比如 a==1），那么就该干嘛干嘛。
粗略给一下代码：
<script>
var dv = document.getElementById("dv");
dv.onmousedown = function() {
var record = dv.getAttribute('data-record');//我把记录变量放到dom属性去了
if(!record){//属性值木有，那就赋值1咯
dv.setAttribute('data-record',1);
}
}
dv.onmouseout = function() {
var record = dv.getAttribute('data-record');
if(record){//属性值有，说明点击了，那就开始吧
displayDate();
dv.setAttribute('data-record',0);//这个时候记录值还原咯，给个0也行= =||
}
};
function displayDate() {
dv.innerHTML = Date();
}
}
</script>这篇关于javascript - 如何实现鼠标左键在控下状态并且移出div才改变它的内容！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
