在 js 中使用 setCapture(） 的问题

issue with setCapture() in js

本文关键字：问题 setCapture js      更新时间：2023-09-26
<HTML>
<HEAD>
<TITLE>Mouse Capture</TITLE>
<SCRIPT>
function action() {
if (event.srcElement.id=='DIV1') DIV1.releaseCapture();
else DIV1.style.backgroundColor=Math.floor(Math.random()*16777216);
}
</SCRIPT>
</HEAD>
<BODY onload="DIV1.setCapture();">
<DIV ID="DIV1" onclick="action();" STYLE="position:absolute;top:10;left:10;height:100;width:200;background-color:red">
</DIV>
</BODY>
</HTML>

上面的代码取自： http://www.htmlgoodies.com/beyond/javascript/advanced-javascript-event-handling.html

问题：

我在IE中试过了，我点击了某个区域(不是DIV1(，颜色变了，我再点击，颜色没有改变，好像颜色只能改变一次，为什么？

这是更改的代码，每次您在 DIV 外部单击时都会更改颜色，我移动到 onclick 到正文。

<HTML>
<HEAD>
<TITLE>Mouse Capture</TITLE>
<SCRIPT>
function action() {
    if (event.srcElement.id=='DIV1') {
        DIV1.releaseCapture(); 
    }
    else {
        DIV1.style.backgroundColor=Math.floor(Math.random()*16777216);
    }
}
</SCRIPT>
</HEAD>
<BODY onload="DIV1.setCapture();" onclick="action();">
<DIV ID="DIV1"  STYLE="position:absolute;top:10;left:10;height:100;width:200;background-color:red" >
</DIV>
</BODY>
</HTML>

这是另一种选择，代码更简单，也适用于谷歌浏览器

<HTML>
<HEAD>
<TITLE>Mouse Capture</TITLE>
<SCRIPT>
function action() {
    if (event.srcElement.id != 'DIV1') {
        document.getElementById('DIV1').style.backgroundColor = get_random_color();
    }
}
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}
</SCRIPT>
</HEAD>
<BODY  onclick="action();">
<DIV ID="DIV1"  STYLE="position:absolute;top:10;left:10;height:100;width:200;background-color:red" >
</DIV>
</BODY>
</HTML>
相关文章：