gpt4 book ai didi

javascript - MooTools 事件未触发

转载 作者:行者123 更新时间:2023-11-28 12:53:45 25 4
gpt4 key购买 nike

我最近被要求在几个网站上工作。其中一个网站想要“更具互动性”,他们向我展示了一个他们想要效仿的网站。

我不太擅长编写自己的脚本,尤其是在 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>

问题的进一步描述

基本上,如果我直接从“domready”函数调用 morph,它会起作用,但本应来自 mouseenter 的事件调用(也尝试过鼠标悬停,甚至单击。都不起作用)永远不会发生。没有错误被抛出。老实说,我很困惑,我以前从未遇到过这个问题。

有什么想法吗?

编辑

目前正在尝试此代码,但仍然没有任何显示。

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

与我的样式表声明有关;如果我删除它,事件就会按原样触发。

它实际上看起来是任何样式。当我将标签放入文件时,它停止工作。

“哇。”是我唯一的回应。

编辑3

我将我的 CSS 更改为这个,它可以工作。我没有查看我以前的 CSS 文件来弄清楚为什么它不能使用它,只是想我会更新每个人。我发布了 2 个 JS fiddle 链接,一个是我的基础 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;
}

最佳答案

我认为你在背景中有一个语法错误:颜色

this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});

关于javascript - MooTools 事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23123371/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com