点击时捕获html内容

Question

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

如何在 JavaScript 中做到这一点？有我可以使用的图书馆吗？

谢谢你

Answer 1

要添加悬停效果，只需在 CSS 样式中添加

:hover

规则并将样式更改添加到其中即可。根本不需要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>

Answer 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>

Answer 3

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 4

HTML Elements Screenshot 是一个 Chrome 扩展程序，它完全可以满足您的需求：

安装完成后，只需点击下图左侧所示的扩展图标即可：

然后，无论您将鼠标悬停在什么位置，都会以粉红色选中，当您单击该区域时，将生成屏幕截图：

点击时捕获html内容

问题描述投票：0回答：4

4个回答

最新问题

点击时捕获html内容

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4