Question

我正在寻找一种在鼠标悬停时突出显示当前html元素的方法（不是特定的对象，用户遇到的任何东西）当用户单击该项目时，我要复制当前html元素的内容。

我该如何用Javascript做到这一点？我可以使用一个图书馆吗？

谢谢

Answer 1

要添加悬停效果，只需在CSS样式中添加:hover规则，然后在样式中添加样式更改即可。完全不需要JS。在下面的示例中，背景颜色在悬停时会更改。通过将css规则添加到<body>标记而不是特定对象，可以对页面上的任何元素执行相同的操作： body *:hover { background-color: steelblue; }

要添加click事件，请使用JS向所有项目或项目容器中添加点击侦听器。然后innerHTML将为您提供HTML节点的“内容”，您可以使用它进行任何操作。在下面的示例中，我们只是将内容发送到另一个函数，该函数会将其记录到控制台。

您可以将所有这些都写到一条语句中，但是通常最好将这些内容分解为小块，以便稍后在需要更改时可以将n个匹配项混合使用。

var addClick = function( callback ) {
  document.querySelector( '#list_items' ).addEventListener( 'click', function( event ) {
    var item = event.target;
    if ( item.nodeName === 'LI' ) callback( item.innerHTML );
  } );
};
var event_handler = function( content ) {
  console.log( 'the content of the clicked item is: ' + content );
};
addClick( event_handler );

.list-item {
  background-color: white;
  border: 1px solid black;
  margin-bottom: 4px;
  padding: 4px;
}
.list-item:hover {
  background-color: steelblue;
}

<ul id="list_items">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item">Item 4</li>
</ul>

Answer 2

document.execCommand需要一个用户事件才能起作用。鼠标悬停时将无法使用，但单击等时（鼠标按下，鼠标悬停等）将无法使用。似乎浏览器现在确实支持它。看看我的JSFiddle。

$('.image').hover(function () {
    // will not work, no user action
  $('input').select();
    document.execCommand('copy');
});

$('.image').mousedown(function () {
    //works
  document.execCommand('copy');
});

从document.execCommand（）触发的复制命令只会影响实际剪贴板的内容，前提是该事件是从用户信任并触发的事件中分派的，或者实现被配置为允许这样做。如何配置实现以允许对剪贴板的写访问超出了本规范的范围。

如果您不喜欢jQuery，可以选择clipboard.js

Answer 3

这是我们可以做到的方式。

var elements = document.querySelectorAll(".reader");
var elementArray = [...elements]
elementArray.map(function(ele){
  ele.addEventListener('mouseover', function(){
    this.setAttribute("style","background:yellow");
  })
  ele.addEventListener('mouseleave', function(){
    this.setAttribute("style","background:white");
  })
  ele.addEventListener('click', function(){
    alert(this.innerHTML);
  })
})

<html>
  
<div class="reader">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit, quam id viverra molestie, augue sapien hendrerit nisl, sed fermentum ante elit porta risus.
</div>
<p class="reader">
  Nulla tincidunt tempor tempus. Pellentesque sed nisi eget felis pulvinar sagittis. Maecenas id erat iaculis, tincidunt urna eu, viverra metus. Pellentesque in libero auctor turpis tempor mollis.
</p>
<p class="reader">
  Quisque vitae felis nisi. Praesent hendrerit sit amet nibh id scelerisque. Phasellus dictum, leo non sollicitudin pulvinar, arcu diam vestibulum leo, a eleifend libero enim et lorem.
</p>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
</html>

点击捕获HTML内容

3 个答案: