html页面上点击图片放大

最新推荐文章于 2024-06-26 23:00:07 发布

前天的五花肉

最新推荐文章于 2024-06-26 23:00:07 发布

阅读量831

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/weixin_49720804/article/details/139523106

版权

需求：

我这里是搭配wangeditor插件使用，然后用直接拿到wangeditor输入的内容用dangerouslySetInnerHTML直接渲染的html页面，页面的代码里面并没有<p><p/><img />这类标签

dangerouslySetInnerHTML渲染如下所示：

因为代码里面并不存在标签，也没办法给加事件，所以这里只能是用原生js去获取dom元素然后结合antd的弹框组件实现的，基本适用所有的html页面，因为不论什么只要可以在html页面展示就一定可以通过dom来操作，虽然react不建议直接操作dom，但是现在我不想听他的建议我只想完成任务哈哈哈哈哈
接下来就是怎么做啦

document.addEventListener("click", handleClick);就是添加监听事件啦一定别忘了document.removeEventListener("click", handleClick);要移除掉！！！
附上代码：

  useEffect(() => {
    function hasAncestorWithClass(el, className) {
      while ((el = el.parentElement) && el !== null) {
        if (el.classList && el.classList.contains(className)) {
          return true;
        }
      }
      return false;
    }

    function handleClick(event) {
      if (event.target.tagName.toUpperCase() === "IMG") {
        if (hasAncestorWithClass(event.target, "question-detail")) {
          setIsZoomed(true);
          setZoomedImageUrl(event.target.src);
        }
      }
    }

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, []);

然后

先定义：