如何在其容器上扩展按钮功能答案

【问题标题】：How to extend button function on its container如何在其容器上扩展按钮功能
【发布时间】：2019-03-15 18:25:58
【问题描述】：

<div class="hotspot">
 <div class="productName">Bag</div>
 <div class="productPrice">20$</div>
 <button>Some action</button>
</div>

我需要在其所有容器上扩展按钮功能并将其隐藏为不透明度 0。

这是我的代码：https://codepen.io/andrew_88/pen/jemBgm。

我需要在所有热点容器上扩展我的按钮的功能，我想以图形方式隐藏它（不透明度：0）；我只想在单击伪 :before 元素（红色矩形）而不是单击 div（productName、productPrice、按钮）时切换“可见”类。我找不到解决办法。

【问题讨论】：

请在问题中包含您的代码。只做链接。
不清楚你到底想做什么。此外，伪元素不是 DOM 的一部分，因此您无法监听伪元素的点击事件。

标签： jquery sass

【解决方案1】：

如果我很好地理解了您的问题，您希望在 psuedo 元素上设置一个点击监听器，这是不可能的。您可以使用点击位置来模拟它。

(function() {
    $("article").each(function() {
        $(this)
            .children(".hotspot")
            .on("touchstart click", function(e) {
                var originalEvent = e.originalEvent;

                if ($(this).hasClass("visible")) {
                    if (originalEvent.layerX < 15 && originalEvent.layerY < 20) {
                        $(this).toggleClass("visible");
                    } else {
                        alert("ciao");
                    }
                } else if (originalEvent.layerX < 15 && originalEvent.layerY < 20) {
                    $(this).toggleClass("visible");
                }
            });
    });
    $(this).toggleClass("visible");

    // $("button").on("click", function() {
    //  alert("ciao");
    // });
})();

这是工作代码：https://codepen.io/anon/pen/rqmwOX。我刚刚更改了 JS 部分，也将min-width 更改为width。

希望对你有帮助

【讨论】：