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

本文介绍了YUI3事件不工作在Firefox或Opera中，但在Chrome中运行良好的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常简单的YUI3脚本，它改变了网页的背景。这里是源代码

 < html> 
< head> 
< title> YUI 3个事件不起作用！< / title> 
< / head> 
< body id =doc-body> 
< div id =rgbvalues> < / DIV> 
< script src =http://yui.yahooapis.com/3.3.0/build/yui/yui-min.jscharset =utf-8>< / script> 
< script type =text / javascript> 
 //使用节点和事件模块
 YUI（）。use（node，event，function（Y）{
 var handleClick = function（e）{
 var docBody = Y.one（＃doc-body）; //相当于原型和jQuery中的$（元素）
 var winHeight = docBody.get（'winHeight'）; viewportwidth 
 var winWidth = docBody.get（'winWidth'）; //获得viewport宽度
 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（＃background-color：+ bgstyle +for＃doc-body）; 
 docBody.setStyle（background-color，bgstyle ）; //与原型和jQuery（元素）.css（）中的$（element）.setStyle（）相同
 Y.one（＃rgbvalues）.set（innerHTML，bgstyle）; // set innerHTML 
}; 
 Y.on（mousemove，handleClick，＃doc-body）; 
}）; 
< / script> 
< / body> 
< / html>

该脚本在FF5或Opera中无效，但在Chrome中运行良好。在萤火虫控制台上也没有错误。即使我从mousemove改变事件点击它是行不通的。

解决方案

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

  html，body {
 margin：0; 
 padding：0; 
 height：100％
}

html 和 body 元素在默认情况下并不占用100％的高度。

因为浏览器之间的不一致行为可能与您的页面使用有关，因为你没有文档类型。添加这个作为第一行：

 <！DOCTYPE html>

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.

解决方案

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>

这篇关于YUI3事件不工作在Firefox或Opera中，但在Chrome中运行良好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！