Question

我有一个非常简单的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>

该脚本在FF5或Opera中不起作用，但在Chrome中运行良好。 firebug控制台上也没有错误。即使我将事件从mousemove更改为click也无效。

Answer 1

要解决您的问题，请添加此CSS：

html, body {
    margin: 0;
    padding: 0;
    height: 100%
}

默认情况下，html和body元素的高度不会达到100％。

浏览器之间行为不一致的原因可能与您的网页使用Quirks Mode这一事实有关，因为您没有doctype。将其添加为第一行：

<!DOCTYPE html>

Answer 2

它似乎不是与事件相关的问题，而是处理CSS规则的方式。

尝试添加stylesheet模块：

YUI().use("node", "event", "stylesheet", function(Y) {

并应用不使用setStyle的规则，但是：

Y.StyleSheet().set('#doc-body', {
    backgroundColor: bgstyle
});

使用FF5 / Win和Explorer 8测试它很有效，遗憾的是我无法尝试使用Chrome。有live example用于演示目的;如果您还想阅读一些文档，请考虑YUI 3: StyleSheet。

免责声明：我不是YUI3专家，因此可以有更好的方法来解决问题。

YUI3事件在Firefox或Opera中不起作用，但在Chrome中运行良好

2 个答案: