javascript - 如何在 JavaScript 事件 onmouseover 或 onmousemove 等时设置条件

Question

我正在尝试创建一个 JavaScript 条件，但它不起作用。 通常，我想设置 HTML 标签悬停、单击、内部的条件 if 条件

if(tag.onmouseover) 像这样，

我正在尝试制作一个 slider ，为我的代码片段提供服务并希望设置 如果幻灯片悬停则条件将执行。

请参阅下面的代码片段:

let $ = ($)=> document.querySelector($);
let _ = (_)=> document.querySelectorAll(_);
let slide = _(".slide");
let demo = $('#demo');



slide.forEach((s)=> {
 if(s.onmouseover){
   demo.innerHTML = 'true';
 } else {
   demo.innerHTML = 'false';
 }
})


// the onmouseover not working in if contidion,

.slide_wrapper{
    display: flex;
    justify-content: space-between;

}
.slide{
    height: 80vh;
    background: cyan;
    color: brown;
    transition: 1s;
    margin: 5px;
    flex: 1;
    text-align: center;
}
.slide:hover{
    flex-grow: 5;
}

<div class="slide_wrapper">
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>

    </div>
    
    
    
    <div id="demo" > </div>

Answer 1

我认为您想要使用 .addEventListener() 才能使其按您的预期工作。应该这样做:

let $ = ($)=> document.querySelector($);
let _ = (_)=> document.querySelectorAll(_);
let slide = _(".slide");
let demo = $('#demo');



slide.forEach((s)=> {
  s.addEventListener('mouseover', function() {
    demo.innerHTML = 'true';
  });
  s.addEventListener('mouseleave', function() {
    demo.innerHTML = 'false';
  });
})


// the onmouseover not working in if contidion,

.slide_wrapper{
    display: flex;
    justify-content: space-between;

}
.slide{
    height: 80vh;
    background: cyan;
    color: brown;
    transition: 1s;
    margin: 5px;
    flex: 1;
    text-align: center;
}
.slide:hover{
    flex-grow: 5;
}

<div class="slide_wrapper">
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>
<div class="slide"> lorem is a dummy text </div>

    </div>
    
    
    
    <div id="demo" > </div>

不需要if，因为事件不是这样工作的。每次将鼠标移到 .slide 上时，都会在此元素上触发 mouseover 事件。如果是这种情况，您需要将 innerHTML 更改为 'true'。如果您将鼠标从元素上移开，则会触发 mouseleave 事件，并且您希望将文本更改为 false。这就是基于事件的通信的工作原理。