时间戳

首页 > 解决方案 > 如何使 svg 图像不可拖动和可点击

javascript - 如何使 svg 图像不可拖动和可点击

问题描述

我正在研究 svg 图像滑块，一切正常，直到我加载带有文本的图像。然后当我拖动鼠标时，我的文本被选中，这很正常。当我用 css 属性阻止它时：

  user-select: none
  -moz-user-select: none
  -webkit-user-drag: none
  -webkit-user-select: none
  -ms-user-select: none
  pointer-events: none

一切都会再次起作用，但是在这样做的同时，svg 元素中的每个 onclick 操作都会被阻止。我的问题是如何使元素可拖动并同时启用 onclick 操作。

编辑

我正在为我的问题提供示例代码，我希望它能澄清一切。

document.getElementById('inspector-wrapper').addEventListener('mousedown', () => {
      const lastObjX = this.imgX; // getting img X,Y
      const lastObjY = this.imgY;
      this.lastX = this.currentX; // getting start X,Y
      this.lastY = this.currentY;
      console.log(this.currentX);
      this.interval = setInterval(() => { // when holding mouse1
        this.definePosition(lastObjX, lastObjY);
      }, 10);

      private definePosition(lastObjX: number, lastObjY: number) {
        const distanceToMoveX = this.currentX - this.lastX;
        if (distanceToMoveX !== 0) {
          this.imgX = lastObjX + distanceToMoveX; // setting new X
        }
        if (this.isYAvailable()) { // if Y available set new value
          const distanceToMoveY = this.currentY - this.lastY;
          if (distanceToMoveY !== 0) {
            this.imgY = lastObjY + distanceToMoveY;
          }
        }
        this.setImgXY();
      }
#inspector-wrapper
  position: absolute
  overflow: hidden
  background-color: transparent

\:host::ng-deep object
  position: absolute
  left: 0
  top: 0
  user-select: none
  -moz-user-select: none
  -webkit-user-drag: none
  -webkit-user-select: none
  -ms-user-select: none
  pointer-events: none
<div id="inspector-wrapper">
  <object data="../assets/main.svg" id="test" type="image/svg+xml"></object>
</div>

标签： javascripthtmlcsstypescriptsvg

解决方案

document.getElementsByTagName("img")[0].onclick = function() {
  console.log("Pointer events work");
}
img {
  user-select: none;
}
<img src="https://www.gravatar.com/avatar/4db6ced4189e044379de4d14c0208ddf?s=48&d=identicon&r=PG&f=1" draggable=false>
<!-- I needed a valid image, so I used my profile picture -->

这用于user-select: none禁用选择，draggable=false禁用拖放，并使用onclick事件来演示指针事件仍然有效。

推荐阅读