Question

正如问题中所述，我有一个div，我想让它可以点击并复制？

使div可复制，我只需执行以下操作

<a href="/example.com">
  <div class="div">i contain some text</div>
</a>

但是当试图复制div中的文本时，链接会被点击。我想要做的是，当点击div时，它应该转到网址，这是有效的。但我也希望能够复制可点击div内的文本。

我更喜欢使用html＆amp; amp;来修复问题css，但即使是javascript也可以作为最后的手段接受。

Answer 1

这需要javascript，我们需要3个事件来识别用户是否正在复制文本。看看下面的片段，让我知道它是否有帮助。

＆＃13;

class Box {
  constructor(target) {
    this.isUserCoping = false;
    this.isMouseClicked = false;
    this.handleMouseDown = this.handleMouseDown.bind(this)
    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.handleMouseUp = this.handleMouseUp.bind(this)
    
    let $target = document.querySelector(target);
    $target.addEventListener('mousedown', this.handleMouseDown), 
    $target.addEventListener('mousemove', this.handleMouseMove), 
    $target.addEventListener('mouseup', this.handleMouseUp);
  }

  handleMouseDown() {
    this.isMouseClicked = true;
  }
  
  handleMouseMove() {
    this.isMouseClicked && (this.isUserCoping = true);
    this.isMouseClicked = false;
  }

  handleMouseUp(e) {
    !this.isUserCoping && this.navigate(e.target.dataset.href)
    console.log(this.isUserCoping);
    this.isUserCoping = false;
    console.log(this.isUserCoping);
  }
  
  navigate(href) {
    window.location.href = href;
  }
}

new Box('.js-div');

＆＃13;

  <div class="js-div" data-href='https://www.google.com'>i contain some text</div>

＆＃13;

Answer 2

添加以下内容：

.div{
  display:inline-block
}

使div可点击并可复制？

2 个答案: