黑马程序员技术交流社区

标题: 自己遇到的浏览器兼容性问题详解 [打印本页]

作者: 王海舟 时间: 2012-9-4 09:22
标题: 自己遇到的浏览器兼容性问题详解
本帖最后由王海舟于 2012-9-4 23:35 编辑

代码功能：一个图片跟随鼠标的移动而移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var divFox = document.getElementById("divFox");
if (!divFox) {
return;
}
divFox.style.left = x+"px";
divFox.style.top = y+"px";
};
</script>
</head>
<body>
<div id="divFox" style="position:absolute">
<img src="images/pic.jpg"/>
我是一只小狐狸
</div>
</body>
</html>

复制代码

代码中有两个地方值得仔细研究。
第一个地方：
var x = window.event.clientX;
var y = window.event.clientY;
第二个地方：
divFox.style.left = x+"px";
divFox.style.top = y+"px";

最开始的时候，在第二个地方我是这么写的：
divFox.style.left = x;
divFox.style.top = y;
结果，网页中的图片不会跟随鼠标的移动而移动。

当遇到问题后，我通过设置断点的方式进行了调试，如下图：

可以知道x和y，即window.event.clientX;window.event.clientY; 它们是Number类型的数据。也就是说获得的鼠标光标位置坐标是Number类型的数据。
而divFox.style.left和divFox.style.top，即一个标签对象的横纵坐标是一个string字符串类型的数据。
所以，我尝试在其后面加上一个px字符串，如下代码：
divFox.style.left = x+"px";
divFox.style.top = y+"px";
结果，网页上的图片终于能够顺利的跟随鼠标的移动而移动了。

divFox.style.left = x+"px";
divFox.style.top = y+"px";
关于以上代码的详解：
我们知道x是一个Number类型，而px是一个字符串常量。它们两者相加会产生怎么样的结果呢？
根据JavaScript引擎的规则，当+号两边一边是一个数值类型的数据，一边是一个字符串类型的数据的时候，会自动将数值类型的数据转换为字符串类型，再进行字符串连接运算。所以最终结果产生的是一个字符串，将这个字符串数据赋值给divFox.style.left 。

总结：
通过onmousemove事件侦听到的鼠标光标的坐标是一个Number类型的数据。
而Dom中标签元素的left和top属性则是string字符串类型。
在将光标坐标赋值给left和top属性之前，我们需要先在它后面加上一个"px"字符串常量，以达到将其转换为一个字符串的目的。

前面部分算作是自己的经验分享，现在开始提问：
杨中科老师的视频中代码是：
divFox.style.left = x;
divFox.style.top = y;
即一开始我的写法，但是老师的程序在网页中能够顺利实现图片跟随鼠标的移动而移动。但是我的却不行。
老师用的是VS2008，我用的是VS2010。
我不清楚是不是这个原因造成了不同的结果？还是有其它原因呢？希望大家帮助解惑。。。。。。

作者: 许庭洲 时间: 2012-9-4 10:51
值得学习！

作者: 黑马杨凯 时间: 2012-9-4 21:45
这个问题我也遇到过，刚回顾了下，在设定位置时，如果用IE8或者之前版本是可以不加px的，我用的IE9，也出现这个问题，加上px比较好，像ff和Chrome也需要加px的。IE浏览器类似问题好像不少。。。

作者: 黑马杨凯 时间: 2012-9-4 22:07
本帖最后由黑马杨凯于 2012-9-4 22:50 编辑

你可以从vs <img>的属性栏里点击style看定位中的设置，默认单位就是px, 估计IE8和之前的IE因该是可以直接翻译出来，执行的时候直接给加上px

作者: 王海舟 时间: 2012-9-4 23:25

黑马杨凯发表于 2012-9-4 22:07
你可以从vs 的属性栏里点击style看定位中的设置，默认单位就是px, 估计IE8和之前的IE因该是可以直接翻译出 ...

谢谢您的帮助，这个问题算是完美解决了。

最后总结巩固一下：（浏览器兼容性问题举例说明~~~）
鼠标光标的坐标（windows.event.clientX）(windows.event.clientY)是一个Number类型的数据。
而Dom中标签元素的left和top属性则是string字符串类型。

在将光标坐标赋值给left和top属性之前，我们需要先在它后面加上一个"px"字符串常量，以达到将其转换为一个字符串的目的，然后才能将这个字符串赋值给left和top属性。

而由于浏览器的兼容性问题，在IE9之前的IE会自动将获得的光标位置数据后面加上"px"，所以程序员在将光标位置数据赋值给left和top属性时不用自己加上"px"。但是在IE9和firefox以及Chrome这些浏览器中，浏览器并不会为我们自动加上"px"，程序员必须自己手动加上"px"。

作者: 王海舟 时间: 2012-9-4 23:33

黑马杨凯发表于 2012-9-4 22:07
你可以从vs 的属性栏里点击style看定位中的设置，默认单位就是px, 估计IE8和之前的IE因该是可以直接翻译出 ...

您说可以查看style的默认单位，具体应该怎么查看呢？（惭愧，没看明白）

作者: 黑马杨凯 时间: 2012-9-5 21:35
本帖最后由黑马杨凯于 2012-9-5 21:40 编辑

只是做个类比，可能我说的不大清楚

5JUW_L%0%JW}ARK}(JSO@~I.jpg (31.88 KB, 下载次数: 64)

作者: 王海舟 时间: 2012-9-5 22:14

黑马杨凯发表于 2012-9-5 21:35
只是做个类比，可能我说的不大清楚

汗，我糊涂了，你说的是属性窗口吧，我去菜单栏里找，难怪没找到。:L
还是对VS不够熟悉呀~

作者: 刘亚中 时间: 2012-9-7 00:06
style对应的本来就是css种的相应值，也就是说style里的值就应该是字符串！只不过部分js解释器会对其进行转换...

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2