代码之家 › 专栏 › 技术社区 › Duggy G

删除mouseleave上的数据属性

javascript

Duggy G · 技术社区 · 6 年前

我有一些导航链接,当鼠标悬停在上面时,会在body标签上创建一个数据属性,使我可以向不同的链接添加背景色,这正是我想要的,但是当鼠标悬停在这些链接之外时,数据属性会被删除或应用一个类,这样我就可以向nav链接添加默认颜色。

这是我的HTML设置:

<nav>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
</nav>

<p class="One">This is class One.</p>
<p class="Two">This is class Two.</p>
<p class="Three">This is class Three.</p>
<p class="One">This is also class One.</p>
<p class="Two">This is also class Two.</p>
<p class="Three">This is also class Three.</p>

这是为主体设置数据属性的javascript:

window.addEventListener("load",function(){

    var links = document.querySelectorAll("nav a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("mouseover", function(){
            document.querySelector("h1").innerText = this.innerText;
            document.body.setAttribute("data-nav",this.innerText);
        });
    }
});

3 回复 | 直到 6 年前

Oliver Trampleasure 6 年前

相反的 mouseover 是 mouseout . 下面的示例演示如何使用 data-nav 作为影响主体内元素样式的参数。

我添加了第二个javascript函数,添加了 鼠嘴 事件到每个 nav a 元件,简单切换 鼠标开关 到 鼠嘴 . 我已经清除了 数据导航 属性,因此CSS样式不再应用。

通过属性的CSS样式 可以使用 element[attribute="value"] 如果是你的话 body[data-nav="Red"]

使用类更合适,但是下面的代码可以工作。

window.addEventListener("load",function(){

    var links = document.querySelectorAll("nav a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("mouseover", function(){
            document.querySelector("h1").innerText = this.innerText;
            document.body.setAttribute("data-nav",this.innerText);
        });
        
        links[i].addEventListener("mouseout", function(){
            document.querySelector("h1").innerText = "No color selected";
            document.body.setAttribute("data-nav","");
        });
    }
});

body p {
  color: black;
}

body[data-nav="Red"] p {
  color: red;
}
  
body[data-nav="Blue"] p {
  color: blue;
}
  
body[data-nav="Green"] p {
  color: green;
}

<nav>

    <a href="#">Red</a>
    <a href="#">Blue</a>
    <a href="#">Green</a>

</nav>

<body>

    <h1>No color selected</h1>
   
    <p class="One">This is class One.</p>
    <p class="Two">This is class Two.</p>
    <p class="Three">This is class Three.</p>
    <p class="One">This is also class One.</p>
    <p class="Two">This is also class Two.</p>
    <p class="Three">This is also class Three.</p>

</body>

onx2 6 年前

您可以更改“ mouseover “事件到A” mouseenter “添加一个” mouseleave “事件。

“mouseenter”事件可以将属性设置为您需要的,而“mouseleave”事件将删除该属性。

关键差异

This website 有一些很好的例子和具体的区别在mouseover、mouseenter和mouseleave之间。下面是从中解脱出来的。

鼠标开关 :鼠标移动时会触发mousemove事件。但这并不意味着每个像素都会导致一个事件。浏览器不时检查鼠标位置。如果发现有变化然后触发事件。

鼠标器 :当mouseenter触发时,它在元素内部的位置并不重要。

鼠标器 :mouseleave事件仅在光标离开时触发。

我建议使用css(而不是javascript)在悬停时定义链接本身的样式,如果您要更改悬停的链接的样式。如果您要更改未悬停在上面的链接的样式,您仍然可以使用类而不是数据属性,但两者都可以。对您的特定用例进行更多的描述可以帮助我使这个答案更加健壮。

jsfiddle example

window.addEventListener("load",function(){
    var links = document.querySelectorAll("nav a");
    for(var i=0; i<links.length; i++){
        links[i].addEventListener("mouseenter", function(){
            document.querySelector("h1").innerText = this.innerText;
            document.body.setAttribute("data-nav",this.innerText);
        });
        links[i].addEventListener("mouseleave", function(){
            document.body.setAttribute("data-nav", '');
        });
    }
});

Belyash 6 年前

一些最佳实践:

不要为每个元素添加侦听器。相反,添加一个全局侦听器或为元素的某些父级添加一个侦听器。
使用类名选择器而不是标记名选择器( .h1 相反 h1 )

我的例子:

/** Helper for toggle classNames of body. */
function toggleHoverClass (className) {
  // Remove all hover-classes.
  document.body.classList.remove('hover-1', 'hover-2', 'hover-3');
  // Add new hover-class.
  document.body.classList.add(className);
}

window.addEventListener("load",function(){
  var elNav = document.getElementById('nav');
  var elH1 = document.getElementById('h1');
  var defaultH1Value = elH1.innerText;

  // One mouseover handler
  elNav.addEventListener("mouseover", function (event) {
    // If it is link with data-type
    if (event.target.dataset && event.target.dataset.type) {
      elH1.innerText = event.target.innerText;
      // Add hover class
      toggleHoverClass('hover-' + event.target.dataset.type);
    }
  });

  // One mouseout handler
  elNav.addEventListener("mouseout", function (event) {
    // If it is link with data-type
    if (event.target.dataset && event.target.dataset.type) {
      elH1.innerText = defaultH1Value;
      // Remove hover class
      document.body.classList.remove('hover-' + event.target.dataset.type);
    }
  });
});

body.hover-1 .One,
body.hover-2 .Two,
body.hover-3 .Three{
  color: red;
}

<h1 id="h1">Hover over the link</h1>

<nav id="nav">
    <a href="#" data-type="1">One</a>
    <a href="#" data-type="2">Two</a>
    <a href="#" data-type="3">Three</a>
</nav>

<p class="One">This is class One.</p>
<p class="Two">This is class Two.</p>
<p class="Three">This is class Three.</p>
<p class="One">This is also class One.</p>
<p class="Two">This is also class Two.</p>
<p class="Three">This is also class Three.</p>