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

【问题标题】：YUI3 events not working in Firefox or Opera, works fine in Chrome thoughYUI3 事件在 Firefox 或 Opera 中不起作用，但在 Chrome 中运行良好
【发布时间】：2011-08-03 06:51:23
【问题描述】：

我有一个非常简单的 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 也不起作用。

【问题讨论】：

标签： javascript google-chrome firefox dom-events yui

【解决方案1】：

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

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

html 和 body 元素默认不占据 100% 的高度。

浏览器之间行为不一致的原因可能与您的页面使用Quirks Mode这一事实有关，因为您没有文档类型。将此添加为第一行：

<!DOCTYPE html>

【讨论】：

这就是为什么 FF 和 Opera 不会注册 mousemove 事件而 chrome 会以某种方式注册的原因。

【解决方案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 专家，因此可能有更好的方法来解决问题。

【讨论】：

据我了解它与事件有关，请注意 console.log("setting background-color:"+bgstyle+" for #doc-body"); 根本没有被触发，在 chrome 中，控制台充满了日志，但在 FF 或 Opera 中没有，得到了一些在 IE 上测试它，它可以在 IE 上运行
@Kumar 如果您想在控制台中查看事件，请从包含控制台语句的行中删除注释符号。
你不会相信是什么解决了这个问题，我只是将docBody.setStyle("background-color", bgstyle); 更改为docBody.setStyle("background", bgstyle);，但仍然在 chrome 中，rgbvalues div 中的值会立即更新，它在 FF 中不起作用，背景颜色变化太突然
@Kumar 摘自我链接的页面：“本质上，它看起来非常像自然的 CSS 语法，除了样式属性必须采用 JavaScript 的驼峰命名法。”。因此，backgroundColor（或简单的背景）有效，而 background-color 无效。
是的，但这仍然不能解释为什么rgbvalues div 中的值在 Chrome 中变化如此顺利，而在 FF 中则不那么顺利