触发 HTML onClick() 事件时，JQuery .hover() 停止工作

Question

我有一个正在处理的网页，并试图将一些 JQuery 合并到其中。 这个项目是我第一次使用 JQuery，所以我可能会遗漏一些非常简单的东西。

一些背景

• 我的 JQuery 代码中只有一个事件监听器（除了${document).ready() ）
• 我在一个单独的 javascript 文件中有多个单击事件侦听器。
• 一旦触发了任何单独的点击事件，JQuery .hover() 事件就会停止工作（并且卡在注册为悬停状态）。

我的代码

jQuery.js

$(document).ready(function() {
      $(".inShop").hover(function(){
            pop($(this).val());
        var divToShow = $(this).parent("p").siblings("div.popup");
        divToShow.css({
            display: "block",
            position: "absolute",
            right: ($(this).offset().left - $(this).width() - 240) + "px",
            top: ($(this).offset().top) + "px"
        });
    },
    function(){
        $("div.popup").hide();   
    });
});

索引.html

        <div id="list">
            <div class="popup" style="display:none;">
                <p id="head"><strong>Info</strong></p>
                <p class="iInfo"><a id="effect">Effect: </a><a id="eFill"></a></p>
                <p class="iInfo"><a id="owned">Owned: </a><a id="oFill"></a></p>
            </div>
            <p id="available"></p>
            <p id="unavailable"></p>
        </div>

脚本.js

var itemShopTxt = document.getElementById('available');
...
list1 += tBreak + `<input class="inShop" name="cpc" type="button" value="${i.name}: ${price} C" onClick="{shopping(this);}"/>`;
...
itemShopTxt.innerHTML = list1;

我试过的

• click 功能停止悬停功能的工作- 起初这是有希望的，但我的 css 使用来自悬停元素的特定属性，所以我无法严格定义它
• jQuery 刷新停止 jQuery 悬停工作- 这会导致相同的问题
• 此列表不包括我打开、阅读和认为与我的问题无关的链接

---

我已包含此 GIF 以更好地演示正在发生的事情：

---

我已经对这个问题进行了广泛的研究，并使用了各种不同的关键词来试图找到我的答案，但对我来说没有任何效果。 如果我错过了什么，请告诉我。

jQuery 代码： 如何使用 jQuery 在悬停元素旁边显示一个 div？

Answer 1

我认为您可以使用event.stopPropagation() or event.preventDefaults()