js的onmousedown事件放在<body>标签下与firefox浏览器所产生的问题

来源：互联网发布：python游戏开发平台编辑：程序博客网时间：2024/06/05 07:16

今天学习之中发现这样一个问题，请看以下代码：

<html><head><title>鼠标事件</title><script language="javascript">function test1(e){window.alert("x="+e.clientX+" y="+e.clientY);}</script></head><body onmousedown="test1(event)"></body></html>

以上代码的作用是，在鼠标按下后，弹出窗口显示x、y的坐标

这段代码在IE下完全是可以正常运行的。但是，我之后试了一下在FireFox中却毫无反应，这到底是什么原因呢。

后来，我就猜想了一下，是不是body的原因。

于是，我就给body加了个宽高试试：

<html><head><title>鼠标事件</title><script language="javascript">function test1(e){window.alert("x="+e.clientX+" y="+e.clientY);}</script></head><body style="height:800px;width:800px;border:1px solid blue;" onmousedown="test1(event)"></body></html>

后来，我就发现一个问题，在IE下，即使给body加了宽高，可是我发现边框还是布满了屏幕：

但是，在firefox中却是正常显示的：

通过对比，我们不难发现，onmousedown事件在body中，即使body没有设置宽高，依旧是正常的。

但是，在firefox中却不是，当我们没有给body设置宽高时，body的范围仅仅是一条线，所以onmousedown事件也就无法响应。

所以，在给body设置高度后，我们就可以在body的宽度范围响应onmousedown事件了。

0 0