如何按住弹出框直到鼠标在完整日历中移开它?

Question

我在我的角度项目中使用完整的日历来显示事件。我正在使用弹出框来显示活动，并在该弹出框中的按钮上触发新的单击事件。但我的主要问题是，当我尝试将鼠标拖到该弹出窗口上时，此弹出窗口会被隐藏。我希望这个弹出窗口被显示，直到我将鼠标移开它。

        eventRender: function (event, element) {
            var chk = $(event.target).css('display', 'block');
            element.popover({
                animation: false,
                delay: 300,
                html:true,
                content: '<div ng-show="checked"><button>abc</button><b>Item</b>:' + event.start + "<b>Fin</b>:" + event.end + "</div>",
                //offset: 10,
                //container: '#calendar',
                trigger: 'hover'
            });

Answer 1

我通过应用mouseenter和mouseleave事件来解决此问题

            element.popover({
            animation: false,
            delay: 300,
            html:true,
            content: '<div ng-show="checked"><button>abc</button><b>Item</b>:' + event.start + "<b>Fin</b>:" + event.end + "</div>",
            //offset: 10,
            //container: '#calendar',
            trigger: 'hover'
            })
                .on("mouseenter", function () {
                    var _this = this;
                    $(this).popover("show");
                    $(".popover").on("mouseleave", function () {
                        $(_this).popover('hide');
                    });
                }).on("mouseleave", function () {
                    var _this = this;
                    setTimeout(function () {
                        if (!$(".popover:hover").length) {
                            $(_this).popover("hide");
                        }
                    }, 300);
                });