Question

我已经阅读了与此问题相关的堆栈上的一些内容，但我似乎无法解决我的问题。

基本上，我正在使用jQueryModal（http://jquerymodal.com/）。

我想要发生的是，当模态启动时，又名：

$('#calendar').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,listYear'
        },

        displayEventTime: true, 

        displayEventEnd: true,


        //removed google api key and cal events for this snipet

        eventClick: function(event) {
            if (event.url) {


                var fancyContent = ('<div><div class="eventDetailsHeader">Event Details</div> <div class="eventDetails"> <label><b>Event: </b></label>' + event.title + '<br>' + '<label><b>Date: </b></label>' + event.start.format('ddd, MMM DD, YYYY') + '<br>' + '<label><b>Start Time: </b></label>' + event.start.format('h:mm a') + '<br>' + '<label><b>End Time: </b></label>' + event.end.format('h:mm a') + '<br>' + '<label><b>Location: </b></label>' + event.location +  '<br>' + '</div></div>');

                $.fancybox.open({
                    src : fancyContent,
                    type : 'html',





                })
                return false;
            }
        },


        loading: function(bool) {
            $('#loading').toggle(bool);
        }

    });

模态按预期打开。包含在该模态中的div是一个可信的div。基本上，我想防止除了contenteditable div之外的所有内容的默认值。当模态关闭时，我希望事件不被绑定。

这样的事情：

$(".buttonSpacing").click(function() {
    $("#page").modal();
}

似乎不起作用。 #myContentEditableDiv失去了默认功能以及其他所有功能。

如果上一个问题已经回答了这个问题，我想我无法正确应用它。

这样做的原因是我希望光标始终保留在可编辑区域，无论它们离开它的哪个位置，即使我让它们选择要动态添加到可编辑区域的内容，或者如果它们意外地单击外部它的。

鉴于我的情况，我怎样才能实现这一目标？

感谢您的帮助。

编辑：

这是一个显示问题的小提琴：

https://jsfiddle.net/7Lwudpr4/2/

Answer 1

问题是鼠标按下事件正从文本区域传播到父元素，然后阻止默认操作。要解决此问题，请添加以下内容：

$('#textArea').bind('mousedown', function(e) {
    e.stopPropagation();
})

更新了JSFiddle：https://jsfiddle.net/gp43028d/1/

请注意，您可能需要处理其他元素上的mouseup事件，因为他们不会触发点击事件，因为在mousedown事件上会调用preventDefault（）。

e.preventDefault（） - 将问题应用于除一个div之外的所有问题

1 个答案: