YUI3事件不工作在Firefox或Opera中,但在Chrome中运行良好 [英] YUI3 events not working in Firefox or Opera, works fine in Chrome though
问题描述
< 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中运行良好的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!