События YUI3, не работающие в Firefox или Opera, прекрасно работают в Chrome, хотя - PullRequest
Новая
       17

События YUI3, не работающие в Firefox или Opera, прекрасно работают в Chrome, хотя

0 голосов
/ 03 августа 2011

У меня есть очень простой скрипт 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 также нет ошибок.Даже если я поменяю событие с мыши на движение, оно не будет работать.

Ответы [ 2 ]

4 голосов
/ 03 августа 2011

Чтобы решить вашу проблему, добавьте этот CSS: 

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

Элементы html и body по умолчанию не занимают 100% высоты.

Причинанесовместимое поведение между браузерами, вероятно, связано с тем, что ваша страница использует режим причуд , потому что у вас нет типа документа.Добавьте это как самую первую строку: 

<!DOCTYPE html>
1 голос
/ 03 августа 2011

Похоже, это не проблема, связанная с событием, а то, как обрабатывается правило CSS.

Попробуйте добавить модуль stylesheet: 

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

и применить правило, не используя setStyle, но: 

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

Протестировано с FF5 / Win и Explorer 8, и это работает, к сожалению, я не могу попробовать использовать Chrome. Существует живой пример для демонстрационных целей; если вы также хотите прочитать некоторые документы, рассмотрите YUI 3: Таблица стилей .

Отказ от ответственности: Я не эксперт YUI3, поэтому могут быть более эффективные способы решения проблемы.

...