简体   繁体   English

onmouseenter和click功能不能一起使用

[英]onmouseenter and click function doesn't works together

I am using Meteorjs for my application. 我正在为我的应用程序使用Meteorjs。 Here I am stucked in a problem. 在这里,我陷入了一个问题。 I have an anchor tag. 我有一个锚标签。 I have to functions which i called on onmouseenter and click event. 我必须要调用onmouseenterclick事件的功能。 What i did is if user click on the anchor tag a bootbox prompt dialog box opened to edit the text of anchor tag. 我所做的是,如果用户click锚标记,则会打开一个启动框提示对话框,以编辑锚标记的文本。 and if user 'mouseenter` on the anchor tag and stay there for 3 second then a function called which shows a bootstrap popover. 如果用户'mouseenter'在定位标记上停留了3秒钟,则调用的函数会显示引导弹出窗口。 My problem is if i click on the anchor tag and stay there for three the popover display and it hides the bootbox dialogbox which was opened on anchor tag click event. 我的问题是,如果我单击锚标记,并在此处停留三个弹出窗口,它会隐藏在锚标记单击事件中打开的启动对话框。
My code is 我的代码是
Function called when mouse is entered on the element. 在元素上输入鼠标时调用的函数。

'mouseenter .edit_name': function (evt, tgt) {
    timer = setTimeout( function() {
            var id=$(evt.currentTarget).data("pk");
            $("#edit_name_"+id).popover({title:"Objective" ,content:Objective})
            $("#edit_name_"+id).popover("show")
            }, 1500);
    }
    },  

Mouse leave function 鼠标离开功能

'mouseleave .edit_name': function (evt, tgt) {
    $(evt.currentTarget).data("pk");
    $("#edit_name_"+id).popover("hide")
    clearTimeout(timer);
},

Function called on click 点击时调用的功能

'click .edit_name': function (evt, tgt) {
    bootbox.prompt("Module Name",function(arg1,arg2){
}
},

But when I click on the element and stay there for 3 seconds bootbox prompt goes disappear and popover is displayed. 但是,当我单击该元素并停留3秒钟时,bootbox提示符消失,并显示弹出窗口。 Tell me gus how can i stop popover to be displayed if i click on the element. 告诉我,如果我单击元素,如何停止显示弹出框。

EDIT: 编辑:
Instead of bootbox.prompt i tried this with bootstrap.editable.js like this 而不是bootbox.prompt我用bootstrap.editable.js这样尝试了

$(".edit_name").editable({
    inputClass: 'input-large',
    url: function (params) {
        Meteor.call("renameItem", params.pk, params.value);

    }
});

but still the same problem. 但仍然是同样的问题。 when popovers display it hides the .editable input field. 显示弹出窗口时,它会隐藏.editable输入字段。

Just check to see if the bootbox exists in your setTimeout function. 只需检查一下bootbox是否在setTimeout函数中。 If the bootbox exists, don't run the popover code. 如果引导箱存在,请不要运行弹出代码。

"mouseenter .edit_name": function () {
  timer = setTimeout( function() {
    if ( !$(".bootbox").length ) {
      $(".edit_name").popover( { title: "Objective", content: Objective } );
      $(".edit_name").popover("show");
    }
  }, 1500);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM