我有一个非常简单的 YUI3 脚本，它可以更改网页的背景。来源如下:
<html>
<head>
<title>YUI 3 events do not work!</title>
</head>
<body id="doc-body">
<div id="rgbvalues"> </div>
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
<script type="text/javascript">
//use node and event modules
YUI().use("node", "event", function(Y){
var handleClick = function(e) {
var docBody = Y.one("#doc-body"); //equivalent to $(element) in prototype and jQuery(element)
var winHeight = docBody.get('winHeight');//get "viewport" height
var winWidth = docBody.get('winWidth');//get "viewport" width
var red = parseInt (e.pageX * (255/winWidth));
var green = parseInt(e.pageY * (255/winHeight));
var blue = parseInt (red*green*0.004);
var bgstyle = "rgb("+red+","+green+"," +blue+")";
console.log("setting background-color:"+bgstyle+" for #doc-body");
docBody.setStyle("background-color", bgstyle);//same as $(element).setStyle() from prototype and jQuery(element).css()
Y.one("#rgbvalues").set("innerHTML", bgstyle);//set innerHTML
};
Y.on("mousemove", handleClick, "#doc-body");
});
</script>
</body>
</html>
该脚本在 Firefox 5 或 Opera 中不起作用，但在 Chrome 中运行良好。 Firebug 控制台也没有错误。即使我将事件从 mousemove 更改为 click 它也不起作用。
最佳答案
要解决您的问题，请添加以下 CSS:
html, body {
margin: 0;
padding: 0;
height: 100%
}
默认情况下，html 和 body 元素不占据 100% 高度。
浏览器之间行为不一致的原因可能与您的页面使用 Quirks Mode 有关。 ，因为你没有文档类型。将其添加为第一行:
<!DOCTYPE html>
关于javascript - YUI3 事件在 Firefox 或 Opera 中不起作用，但在 Chrome 中工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6922672/