Question

当用户跨多个mouseup选择文本时，如何在鼠标事件（如click或<div>）上生成Bootstrap弹出窗口？

我试图在this fiddle中创建HTML和JQuery的副本（尽可能接近）。

在小提琴的示例中可以看到，我不能使用div来封装所有文本<div>，因为每个文本都有一个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更好的好处，所以我暂时更改了它。

Answer 1

您应该能够使用jQuery.each()来为每个消息框获得单独的工具提示。这样，每个消息框都可以拥有自己的elem，text，row和id变量集。

$('.messagebox').each(function() {
    var elem = $(this),
        text = elem.find('.message_content p').text(),
        row = elem.closest('.message_row'),
        id = row.attr('data-msg-id');

    elem.on('click', function(event) {
        event.stopPropagation();

        var args = {
            placement: "top",
            content: ("ID:" + id + " Text: " + text),
            trigger: "manual",
        };

        elem.popover(args);
        elem.popover("show");
    });
});

Answer 2

只需将您的.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>

在多个div中选择文本时如何生成Bootstrap Popover

2 个答案: