javascript 链接元素的JS：preventDefault()< a>

dnph8jn4 于 2023-01-04 发布在 Java

关注(0)|答案(2)|浏览(106)

当我点击链接中的嵌套图片时，下载弹出窗口出现在顶部。如何防止作为图片父元素的链接元素的默认行为？

<div class="gallery">
      <div class="gallery__item">
        <a class="gallery__link" href="large-image.jpg">
          <img
            class="gallery__image"
            src="small-image.jpg"
            data-source="large-image.jpg"
            alt="Image description"
          />
        </a>
      </div>
      <div class="gallery__item">
        <a class="gallery__link" href="large-image.jpg">
          <img
            class="gallery__image"
            src="small-image.jpg"
            data-source="large-image.jpg"
            alt="Image description"
          />
        </a>
      </div>
      <div class="gallery__item">
        <a class="gallery__link" href="large-image.jpg">
          <img
            class="gallery__image"
            src="small-image.jpg"
            data-source="large-image.jpg"
            alt="Image description"
          />
        </a>
      </div>
    </div>

我已经尝试过阻止event.target-〉img元素的传播，但是这个方法对我没有帮助。

JavaScript

来源：https://stackoverflow.com/questions/74993551/js-preventdefault-for-the-link-element-a

2条答案

按热度按时间

svmlkihl1#

使用preventDefault函数，以便在单击任何链接时，我们可以阻止默认行为，即下载弹出窗口：

const links = document.querySelectorAll('.gallery__link');

links.forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
    // code here
  });
});

或者，您也可以使用return false，您将得到相同的结果。

const links = document.querySelectorAll('.gallery__link');

links.forEach(link => {
  link.addEventListener('click', event => {
    // code here
    return false;
  });
});

赞(0）回复(0）举报 2023-01-04

eivgtgni2#

document.querySelectorAll('.gallery__image').addEventListener('click', (e) => {
  e.stopPropagation();
})

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 链接元素的JS：preventDefault()< a>

2条答案

相关问题

热门标签

最新问答