代码之家 › 专栏 › 技术社区 › kambi

单击时捕获HTML内容

selenium reactjs html javascript

-1

kambi · 技术社区 · 7 年前

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

我如何用javascript实现这一点?有我可以用的图书馆吗?

谢谢你

3 回复 | 直到 7 年前

Shilly 7 年前

要添加悬停效果,只需添加 :hover 将规则添加到css sylings中,并将样式更改添加到css sylings中。完全不需要js。在下面的示例中,悬停时背景颜色会更改。通过将css规则添加到 <body> 标记而不是特定对象: body *:hover { background-color: steelblue; }

若要添加单击事件,请使用js将单击侦听器添加到所有项或项的容器中。 innerHTML 然后将给您HTML节点的“内容”,您可以使用它做任何事情。在下面的示例中,我们只是将内容发送到另一个将其记录到控制台的函数。

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

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>

aldi 7 年前

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

TRIKONINFOSYSTEMS 7 年前

我们可以这样做。

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>