当用户跨多个选择文本时，如何在鼠标事件（如mouseup或click）上生成Bootstrap弹出窗口<div>？
我试图在这个小提琴中创建HTML和JQuery的副本（尽可能接近）。
正如您在小提琴的示例中看到的那样，我不能使用div封装所有text<div>的a ，因为每个文本都有一个ID，该ID是我将要使用的弹出按钮的功能。
您会注意到，当一次div选择文本时，会出现一个弹出框，但是当您选择1个以上的文本时div，不会出现该弹出框。
有趣的是，它在一周左右的时间就可以在Firefox上运行，但是在我将Firefox更新到最新版本（66.0.2）后就停止了工作。此外，自开始以来，Chrome就一直存在此问题。
我已经尝试过在Stack Overflow上找到的其他解决方案，但是这些解决方案似乎都不适合我的情况。
关于我做错了什么的任何解决方案，我可以尝试执行哪些替代方法的解决方案，或者为什么这样做可能不起作用的原因？
编辑：
我也尝试mouseup过此操作，但在此版本的FF或最新的Chrome中似乎无法使用。click之所以将其更改为，是因为当用户clicks位于main_div弹出框之外或其他任何位置时，我还会关闭其他弹出框。由于该click事件是在事件发生之后mouseup发生的，因此我发现它会在出现后立即杀死我的弹出窗口。我必须从上述click事件中单击的弹出窗口列表中删除此弹出窗口，然后手动将其添加到希望发生的地方。
我使用没问题mouseup，只是尝试了一下，没有发现任何好处，click因此我暂时进行了更改。
只需将您的.on（“ click” ...）更改为.on（“ mouseup” ...）。
在Ubuntu 16.04，x64上测试。的Firefox 66.0.2
$("#main_div").on("mouseup", ".messagebox", function(e) {
var selected_text = window.getSelection().toString();
var elem = $(this);
var row = elem.closest(".message_row");
var id = $(row).attr("data-msg-id")
e.stopPropagation();
if (selected_text !== "") {
elem.popover({
placement: "top",
content: ("ID:" + id + " Text: " + selected_text),
trigger: "manual",
});
elem.popover("show");
}
});
// Remove Popover on Hover
$("body").on('mouseenter', '.popover', function(e) {
e.stopPropagation();
$(this).remove();
});#main_div {
padding-top: 50px;
}
.messagebox {
background: #f8f9fa;
border: solid 1px #6c757d;
margin-top: 5px;
padding-left: 5px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div id="main_div">
<div class="big_box">
<div class="message_row" data-msg-id="50">
<div class="messagebox">
<div class="message_content">
<p>
Random Text Here.
</p>
</div>
</div>
</div>
<div class="message_row" data-msg-id="51">
<div class="messagebox">
<div class="message_content">
<p>
Some Text here
</p>
</div>
</div>
</div>
<div class="message_row" data-msg-id="52">
<div class="messagebox">
<div class="message_content">
<p>
Some more text here.
</p>
</div>
</div>
</div>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句