JavaScript跨浏览器属性兼容：避免||运算符的陷阱

JavaScript跨浏览器属性兼容：避免||运算符的陷阱

在编写代码时，开发者常遇到一个易错点。由于不同浏览器对API的定义存在差异，我们通常采用如下方式来判断应使用哪个属性：

var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElement;

上述代码利用||运算符来检查并选择适用的属性。

然而，必须谨慎处理JavaScript中作为条件判断的值。

例如：

var sLeft = window.screenLeft || window.screenX; //firefox use screenX
console.log(sLeft);

这段代码的初衷是：若screenLeft存在则返回window.screenLeft，否则在Firefox中返回window.screenX。

但如果screenLeft的值恰好为0，代码便会进入||运算符之后的条件分支，从而导致逻辑错误（gg）。

因此，建议在判断属性值时，采用更严谨的方式，如使用hasOwnProperty或typeof进行判断，以提高精确度。

var sLeft = window.screenLeft;
if( !window.hasOwnProperty('screenLeft')) sLeft = window.screenX;