javascript - addeventlistener 仅在 chrome 中无法正常工作

标签 javascript css events mouse

我有一个代表论坛主题的基本列表,形式为:

<ul class="thread-list">
    <li>...</li>
    <li>...</li>
    ...
</ul>

我想做的是当鼠标光标在整个<ul>上时元素,所以包含<li>同样,我将“悬停”类名称添加到 <ul><ul> 后面出现一个框阴影.

我的 CSS 代码是:

.thread-list{-webkit-transition: box-shadow 0.5s;transition: box-shadow 0.5s;}
.thread-list.hover{-webkit-box-shadow: 0px 2px 5px #333;box-shadow: 0px 2px 5px #333;}

添加事件的 javascript 是:

var ul = document.getElementsByClassName('thread-list')[0];                                                   
ul.addEventListener("mouseenter", function(e){
        hover = 1;
        this.classList.add('hover');
}, false);
ul.addEventListener("mouseleave", function(e){
        hover = 0;
        this.classList.remove('hover');
}, false);

这是我的 initUI() 函数的一部分,它在 window.onload 被触发后立即启动。

问题是这在 Firefox 58.0.2 和 Opera 50.0 上运行良好,但是当我在 Chrome 64.0.3282.140 上尝试时,框阴影出现但不完全出现,仅在左侧,1/4右侧,当我移动鼠标时它会闪烁。

我还尝试了 mouseover 和 mouseout 事件。

我怀疑当我越过 <li> 时事件也会被触发元素,而不仅仅是 <ul>即使只有 <ul>添加“悬停”类的元素。

我做错了什么?

var ul = document.getElementsByClassName('thread-list')[0];
ul.addEventListener("mouseenter", function(e) {
  hover = 1;
  this.classList.add('hover');
}, false);
ul.addEventListener("mouseleave", function(e) {
  hover = 0;
  this.classList.remove('hover');
}, false);
.thread-list {
  -webkit-transition: box-shadow 0.5s;
  transition: box-shadow 0.5s;
}

.thread-list.hover {
  -webkit-box-shadow: 0px 2px 5px #333;
  box-shadow: 0px 2px 5px #333;
}
<ul class="thread-list">
  <li>...</li>
  <li>...</li>
  ...
</ul>

最佳答案

不知道你为什么要这样做......

为此使用 :hover 伪类:

.thread-list{-webkit-transition: box-shadow 0.5s;transition: box-shadow 0.5s;}
.thread-list:hover{-webkit-box-shadow: 0px 2px 5px #333;box-shadow: 0px 2px 5px #333;}
<ul class="thread-list">
    <li>...</li>
    <li>...</li>
    ...
</ul>

关于javascript - addeventlistener 仅在 chrome 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48707822/

相关文章:

html - 将段落宽度限制为其父 div

html - 背景滤镜模糊与波浪边框相结合

javascript - 使用 jquery 将位置从相对位置更改为固定位置?

javascript - Bootstrap 3居中导航在链接底部添加5个像素

javascript - 如何使用 Angular 2 扩展外部 JavaScript 库?

Javascript - Dojo - 对象对自身的引用

python - 如何确定按钮何时在 Tkinter 中发布?

wpf - 控制初始化顺序惨败

javascript - 如何按名称和列关联对象

javascript - UL 标签(来自 wysihtml5 javascript)不水平对齐