jquery - 如何在点击时覆盖 jQuery 函数以进行图像缩放？

Question

我有一个名为main.js. 在 main.js 中有以下代码，当单击 div 内部时禁用关闭 div（单击 div 外部它会关闭 div）。

       // Articles.
        $main_articles.each(function() {

            var $this = $(this);

            // Close.
                $('<div class="close">Close</div>')
                    .appendTo($this)
                    .on('click', function() {
                        if (nohash) {
                            history.go(-1);
                        } else {
                            $main._hide(true);
                            nohash = true;
                        }
                    });

            // Prevent clicks from inside article from bubbling.
                $this.on('click', function(event) {
                    event.stopPropagation();
                });

        });

这段代码有效，但我在 div 中添加了一个带有属性的 img 标签，data-action="zoom"所以当我点击 img 时，它需要被缩放。这不起作用，因为event.stopPropagation();来自main.js插件。所以我不想改变原来的 main.js 库（因为功能更新）。我在 main.js 之后添加了 custom.js 以放入覆盖上述函数的 custom.js 代码。

简而言之：

当我在 div 内部单击时，它不会关闭 div 当我在 div 外部单击时，它会关闭 div 当我单击具有data-action="zoom"禁用属性的 img 标签时，event.stopPropagation();然后用于缩放的库工作。当我单击内部或外部 div 时，它会使用event.stopPropagation();并关闭 div。

更新示例：

我有：

<div id="wrapper">
  <div id="main">
    <article id="myarticle">
        <h2 class="major">TITLE</h2>
        <p>jfjfjfjfjfjfj</p>
        <img src="image.png" height="484" width="655" data-action="zoom" alt="">
        <p>jfjjffjf</p>
        <div class="close">Close</div>
    </article>
  </div>
</div>

原始代码在这里： https ://themes.gohugo.io/theme/hugo-theme-dimension/assets/js/main.js

在第 312 行，您将看到：

// Articles.
        $main_articles.each(function() {

            var $this = $(this);

            // Close.
                $('<div class="close">Close</div>')
                    .appendTo($this)
                    .on('click', function() {
                        if (nohash) {
                            history.go(-1);
                        } else {
                            $main._hide(true);
                            nohash = true;
                        }
                    });

            // Prevent clicks from inside article from bubbling.
                $this.on('click', function(event) {
                    event.stopPropagation();
                });

        });

所以这个功能禁用点击内部文章标签，这很好......但我只需要启用点击带有属性的 img 标签的内部文章标签data-action。

如何覆盖此功能以启​​用仅单击文章内具有属性“data-action”的 img 而禁用单击文章内的其他元素？

标签： jquery