YUI3 events not working in Firefox or Opera, works fine in Chrome though

问题

I have a very simple YUI3 script which changes background of a web page. Here is the source

<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>

The script doesn't work in FF5 or Opera but works well in Chrome. There is no error on firebug console either. Even if I change the event from mousemove to click it doesn't work.

回答1:

To fix your problem, add this CSS:

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

The html and body elements do not take up 100% height by default.

The reason for the inconsistent behaviour between browsers is probably to do with the fact that your page is using Quirks Mode, because you don't have a doctype. Add this as the very first line:

<!DOCTYPE html>

回答2:

It appears it's not an event related issue but rather in the way the CSS rule is handled.

Try add the stylesheet module:

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

and apply the rule not using setStyle but:

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

Tested with FF5/Win and Explorer 8 and it works, unfortunately I can't try using Chrome. There is a live example for demo purposes; if you'd also like to read some docs please consider YUI 3: StyleSheet.

Disclaimer: I'm not a YUI3 expert so there could be better ways to solve the issue.

来源：https://stackoverflow.com/questions/6922672/yui3-events-not-working-in-firefox-or-opera-works-fine-in-chrome-though

标签

javascript

firefox

google-chrome

javascript-events

yui