我无法弄清楚为什么这段代码无效:
<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>
甚至没有任何错误......它什么也没做。
令人惊讶的是,如果我将'mousedown'
更改为'keydown'
则可行
<!DOCTYPE html>
<html><head></head><body onload="
document.body.addEventListener('keydown',function(e){
alert(123);
},false);
"></body></html>
(我正在使用chrome btw)
答案 0 :(得分:3)
请注意,我添加了一些内容并为body
添加了边框,以便您可以查看其尺寸。 If you remove the content,你看到的一切都是黑线。如果没有内容(如任何其他块元素)意味着您无法在其中单击,则body
不会占用任何空间。
您似乎认为body
会在整个浏览器窗口中传播,但事实并非如此。
如果您将处理程序附加到window
,它将获取在可见区域内发生的所有事件。
答案 1 :(得分:2)
附加到body元素的侦听器中 this 的值在不同浏览器中的行为略有不同。在Firefox和旧版本的IE中尝试以下操作(注意它是专门针对这种情况,它不是一般的“这是什么?”功能):
<head>
<title>Some "this" tests</title>
<script type="text/javascript">
var whatIs = (function(global) {
return function(that) {
// If String(that) isn't useful, try some stuff
if (String(that) == '[object]') {
if (that == global || that == window) {
alert('window');
} else if (typeof that.tagName == 'string') {
alert(that.tagName);
} else {
alert(that);
}
// Otherwise show that
} else {
alert(that);
}
}
})(this);
</script>
</head>
<body onclick="whatIs(this);" onload="whatIs(this);">
<div onmousedown="whatIs(this)">this</div>
</body>
在所有浏览器中,onload显示窗口并单击div显示 this 作为div。单击正文将在Firefox中显示此 窗口,但在IE,Opera和Chrome中显示 body 元素。
答案 2 :(得分:1)
另一种方法是使用jQuery绑定。它不仅可以减少代码,而且大多数浏览器也支持它。试试这个:
$('body').bind('click mousedown', function() {
alert(123);
});
答案 3 :(得分:0)
尝试使用全局窗口对象:
<!DOCTYPE html>
<html><head></head><body onload="
window.addEventListener('click',function(e){
alert(123);
},false);
"></body></html>
对于给定的HTML,正文没有高度和宽度,因此当您单击窗口时它不会收到任何鼠标事件。它仍然可以接收关键事件。如果给它一个高度和宽度,它将起作用。
<!DOCTYPE html>
<html><head></head><body style="height:1000px; width:1000px" onload="
document.body.addEventListener('mousedown',function(e){
alert(123);
},false);
"></body></html>