События MooTools не запускаются
Меня недавно попросили поработать на нескольких сайтах. Один из этих веб-сайтов хочет быть "более интерактивным", и они показали мне сайт, который они хотели бы подражать.
Я не очень хорош в написании своих собственных сценариев, особенно в отношении DHTML, поэтому я использую MooTools, чтобы справиться с более интерфейсными изменениями.
В моем HTML-коде у меня есть два тега Div, и я хочу, чтобы, когда вы наводите курсор мыши на один, он сжимал другой и расширял тот, на который вы смотрели, но никакие события, которые я пытаюсь прикрепить, не запускаются вообще (ничего не происходит, и ничего не появляется в консоли).
Вот мой HTML, я просто использую стандартные mootools, скачанные с их сайта.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cnergi - Splash </title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
$('employee').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="employee" id="employee">
Employee test
</div>
<div class="client" id="client">
Client Test
</div>
</div>
</body>
</html>
Дальнейшее описание проблемы
По сути, если я вызываю morph прямо из функции 'domready', это работает, но вызовы событий, которые должны исходить из мышиного центра (также пытались навести курсор мыши и даже щелкнуть. Ни одна из них не работает), никогда не происходят. Ошибки не выбрасываются. Я, честно говоря, озадачен, у меня никогда не было этой проблемы раньше.
Есть идеи?
РЕДАКТИРОВАТЬ
В настоящее время пытается этот код, все еще ничего не появляется.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<div id="wrapper">
<div id="employee" class="employee">
Something
</div>
</div>
<script type="text/javascript">
document.addEvent('domready',function(){
var s = $('employee');
s.addEvent('click',function(){
alert('I was clicked!');
});
});//End document.addEvent domready
</script>
</body>
</html>
РЕДАКТИРОВАТЬ 2
Имеет какое-то отношение к моему объявлению таблицы стилей; если я уберу его, события начнутся как надо.
На самом деле это вообще какой-то стиль. В тот момент, когда я поместил тег в файл, он перестал работать.
"Wut." мой единственный ответ.
Редактировать 3
Я изменил свой CSS на это, и это работает. Я не просмотрел свой предыдущий CSS-файл, чтобы понять, почему он не работает с ним, просто думал, что обновлю всех. Я разместил 2 скриптовые ссылки JS, одну с моим базовым CSS (пожалуйста, помните, что это была незавершенная работа, и что я частично дальтоник, так что яркие цвета помогают мне увидеть различия), а другая с CSS ниже, который работает нормально,
В итоге: сегодня я узнал, что CSS может предотвратить запуск событий javascript.
html, body, body>div{
height:100%;
}
body > div{
width:900px;
text-align:left;
margin:0 auto 0 auto;
background-color:white;
}
body{
text-align:center;
background-color:grey;
padding:0;
}
#wrapper{
position:relative;
width:inherit;
height:inherit;
}
#footer{
position:absolute;
bottom:0px;
text-align:center;
width:inherit;
}
2 ответа
MooTools domready событие доступно только на window объект - вот ваш пример в рабочем состоянии: http://jsbin.com/rucaz/1/edit
Для справки: http://mootools.net/docs/core/Utilities/DOMReady
Я думаю, что у вас есть синтаксическая ошибка в фоновом режиме: цвет
this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});