问：

我有一种工作脚本，可以在新窗口中打开特定 div（称为“note-viewer”）中的所有图像。我无法编辑 div 以简单地在图像周围放置常规锚点或添加 onclick 函数，并且 div 中的图像太小而无法正确查看。

问题是它在您第一次单击图像时可以完美运行。如果在此之后单击另一张图像，则必须单击它两次才能使其正常工作。一旦你尝试第三张图片，什么也没发生。它不会抛出任何类型的错误。你点击一下，它就坐在那里。

我需要它一键点击任何图像才能在新窗口中打开它。

代码如下：

$("#note-viewer img").click(function () {
        var imageLink = $(this).attr("src");
        $("#note-viewer img").each(function () {
            var myWindow = window.open("", "Image", "_blank", "toolbar=no,scrollbars=no,resizable=yes");
            myWindow.document.write("<head><title>Image</title></head>");
            myWindow.document.write("<img src=" + imageLink + ">");
            return myWindow;
        });
    });

我知道;我在不应该使用的时候使用 document.write。“不好，Dev，Bad！”但它仅供我们部门内部使用。

更新

我只是尝试通过尝试使用jQuery将图像标签与锚标记包装在一起来简化它，如下所示：

$(function () {
        $('#note-viewer img').wrap(function () {
            return '<a href="' + $(this).attr('src') + '"></a>';
        });
    });

那根本行不通。

JavaScript 事件处理单击 Trix

const noteViewer = document.getElementById('note-viewer');
noteViewer.addEventListener('click', openLink, false);
noteViewer.addEventListener('trix-change', linkImg, false);

function findLink(el) {
   if (el.tagName == 'A' && el.href) {
      return el.href;
   } else if (el.parentElement) {
      return findLink(el.parentElement);
   } else {
      return null;
   }
}

function openLink(e) {
   const link = findLink(e.target);
   if (link == null) { return; }
   e.preventDefault();
   var base64Check = link.slice(0, 4);
   if (base64Check == 'data') {
      window.open().document.body.innerHTML = '<img src="' + link + '">';
      return;
   }
   window.open(link, '_blank');
}

function linkImg(e) {
   $("#note-viewer figure").each(function () {
      var images = this.getElementsByTagName('img');
      for (var i = 0, image = images[i]; i < images.length; i++) {
         var imageLink = $(image).attr("src");
         $(this).wrap('<a href="' + imageLink + '">');
      }
   });
}

单击第一张图像后，由于某种原因，其余图像仍然需要单击两次，但它们都可以工作。此外，它还消除了 .document.write

快速添加：事实证明，它需要两次点击，因为 Trix 编辑器将我（用户）集中在图像上，以便在第一次点击时添加标题。我不知道为什么它在您单击的第一张图像上没有那样的行为。

上一个：Google Maps API - addListener 忽略地图上的点击事件

下一个：我能知道JS中的点击事件是否是在光标指针时产生的吗？

在有 Javascript 问题的新窗口中打开图像

Open Image in New Window with Javascript Problem

更新

评论