单击时捕获 html 内容答案

【问题标题】：Capture html content on click单击时捕获 html 内容
【发布时间】：2020-02-08 06:35:57
【问题描述】：

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

如何在 Javascript 中做到这一点？有我可以使用的库吗？

谢谢

【问题讨论】：

您可以使用简单的 CSS 规则进行突出显示：:hover。要复制内容，您必须指定之后对内容执行的操作。你是说copy the content to the clipboard，还是copy the content to use in a variable，还是copy the content to insert into another HTML element.，...？
@Shilly 谢谢，我想复制任何对象（没有预定义）并将其复制到变量中

【解决方案1】：

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

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

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

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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案3】：

document.execCommand 需要用户事件才能工作。它在悬停时不起作用，但在点击等（mousedown、mouseup 等）时会起作用。似乎浏览器现在确实一直支持它。看看我的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

【讨论】：