当前位置：文江博客话题详情

如何检测鼠标松开时触发的模糊？

发布于 2024-12-02 15:02:07 字数 144 浏览 1 评论 0原文

我正在监听表单输入上的模糊事件。现在，当在控件之外按下鼠标时，该事件立即被触发。我需要能够检测鼠标何时在输入之外完全单击（鼠标按下然后鼠标向上）。

是否已经有一个我可以监听的事件类型可以处理这个问题？如果没有，处理此类事件的最佳方法是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相对绾红妆 2024-12-09 15:02:07

我想说不，没有任何此类事件。我不认为有一个完美的方法来处理，

我会尝试通过

添加全局变量来处理它，将其默认为-1，并在表单获得焦点时将其设置为1。
当表单获得焦点时向文档添加一个 mousedown 处理程序。它将把全局变量设置为 1。
- 触发时，它将测试它是否仍在表单中（使用event.target）。如果是这种情况，则设为 1，否则设为 0。
mousedown 处理程序将具有 event.preventDefault; 并 return false;。 这可能会给您的其他事件处理程序带来一些麻烦。为了避免这样的麻烦，我将尝试捕获在捕获阶段可能被损坏的事件，而不是冒泡事件。
当表单获得焦点时，向文档添加 mouseup 处理程序。在其中，测试变量的值是否为 0。如果是，则执行模糊工作并删除两个特殊处理程序。

但这可能有一些弱点（特别是如果用户在按下鼠标时离开窗口）。

我希望这是清楚的，我会尝试尽快发布小提琴。

编辑：这是小提琴。但请注意，我强制将焦点放在表单上，但它只起作用。我这样做是因为看起来表单永远不会获得焦点（可能与 jsfiddle 处理事件的方式有关）。但从理论上讲，这应该在没有 $("form").focus(); 行的情况下工作。

作为旁注，我使用 jQuery 进行一些简写，如果需要，我将尝试删除这些调用。

回复收藏 0 原文

一刻暧昧 2024-12-09 15:02:07

嗯，我想在思考了一些之后我得到了一些东西。
我对我的语法仍然有点动摇，但我认为这可能会满足您的需求。
这个想法是，你捕获 .blur 中的控件 id，然后在 mouseup 中检查控件 id 与 .blur 控件 id，如果它们不相等，你就会失去焦点，并且可以在 mouseup 中执行你想要的操作，另外，在触发 mouseup 事件后，不要忘记清除模糊控件 id，否则它将触发多次鼠标 up 事件。

var blurControlID;

$("selector").blur(function () {
    blurControlID = this.id;
});

$("selector").onMouseUp(function() { 
    if (blurControlID != "")
    {    
        if (this.id != blurControlID)
        {//do what you want
            blurControlID = "";
        }
    }
});

hmmm i think i got something after thinking about this for a few.
I'm still a little shakey with my syntax, but I think this may do what your looking for.
The idea is that you capture the control id in the .blur, and then in your mouseup you check that controls id against your .blur control id and if they are not equal you have lost focus and can do what you want in the mouseup, also dont forget to clear out your blur control id after you fire your mouseup event or it will fire for multiple mouse ups.

var blurControlID;

$("selector").blur(function () {
    blurControlID = this.id;
});

$("selector").onMouseUp(function() { 
    if (blurControlID != "")
    {    
        if (this.id != blurControlID)
        {//do what you want
            blurControlID = "";
        }
    }
});

回复收藏 0 原文

云胡 2024-12-09 15:02:07

您可以在 body 标记的 onmouseup 属性中调用函数。

<body onmouseup="doWhatINeed();">

在该函数中，您当然必须引用有问题的对象，但如果没有您的代码示例，我无法提供进一步的帮助。

编辑：在不知道目的的情况下，我可以给出特定类型目的的粗略示例...

Javascript：

var hasBeenDone = false;

function doWhatINeed() {
  if(!hasBeenDone) {
    //do what is required
    hasBeenDone = true;
}

function anotherFunction() {
  //some other stuff which requires the mouseup event to fire again for the element in question...
  hasBeenDone = false;
}

这是我在类似情况下无数次使用的方法，并且从未以任何方式出现问题。

You can call a function in the onmouseup attribute of the body tag.

<body onmouseup="doWhatINeed();">

In that function you will have to reference the object in question of course, but without example of your code I cannot offer further help.

Edit: Without knowing the purpose I can give a rough example of a particular type of purpose...

Javascript:

var hasBeenDone = false;

function doWhatINeed() {
  if(!hasBeenDone) {
    //do what is required
    hasBeenDone = true;
}

function anotherFunction() {
  //some other stuff which requires the mouseup event to fire again for the element in question...
  hasBeenDone = false;
}

This is the approach I have used countless times for similar circumstances and has never been problematic in any way.

回复收藏 0 原文

梦初启 2024-12-09 15:02:07

我遇到了类似的问题，并以这种方式处理它（我使用 jQuery 来处理事件，但你当然可以使用 addEventListener 代替）：

// Catch the blur event.
$('#myinput').blur(function () {
    // Record the input the blur event happened on.
    var input = this;
    // Catch the mouseup event once, on either the window or the input.
    $(window).add(input).one('mouseup', function (e) {
        // If the mouseup event happened on the input, prevent
        // propagation up to the window, and don't do anything else.
        if (input === this) {
            e.stopPropagation();
            return;
        }
        // Otherwise, wait for any other click handlers to run.
        // In my code, this is used to detect if a user clicked
        // a "cancel" button, rather than just leaving the input.
        setTimeout(function () {
            // Do what you need to do.
            // In my code, this calls a REST API to save the input,
            // or has no effect if the user previously clicked cancel.
        }, 0);
    });
});

I ran into a similar problem, and handled it this way (I used jQuery for events, but you can of course use addEventListener instead):

// Catch the blur event.
$('#myinput').blur(function () {
    // Record the input the blur event happened on.
    var input = this;
    // Catch the mouseup event once, on either the window or the input.
    $(window).add(input).one('mouseup', function (e) {
        // If the mouseup event happened on the input, prevent
        // propagation up to the window, and don't do anything else.
        if (input === this) {
            e.stopPropagation();
            return;
        }
        // Otherwise, wait for any other click handlers to run.
        // In my code, this is used to detect if a user clicked
        // a "cancel" button, rather than just leaving the input.
        setTimeout(function () {
            // Do what you need to do.
            // In my code, this calls a REST API to save the input,
            // or has no effect if the user previously clicked cancel.
        }, 0);
    });
});

回复收藏 0 原文

~没有更多了~