Jquery - 使用两者时区分相同输入上的“点击”和“焦点”答案

【问题标题】：Jquery - Differentiate between 'click' and 'focus' on same input when using bothJquery - 使用两者时区分相同输入上的“点击”和“焦点”
【发布时间】：2014-03-13 16:25:11
【问题描述】：

如果输入被点击或如果输入进入焦点，我正在尝试触发输入事件。

我遇到的问题是阻止事件在单击时触发两次，因为显然，单击输入也会使其成为焦点。我在 jfiddle 上放了一个非常松散的版本来告诉你我的意思，代码如下：

HTML：

<body>
    <input type="textbox" name="tb1" class="input1"></input>
    <label> box 1 </label>
    <input type="textbox" name="tb2" class="input2"></input>
    <label> box 2 </label>
</body>

jQuery

$(function () {
    $('.input2').click(function() {
        alert("click");
    });
    $('.input2').focus(function() {
        alert("focus");
    });
});

JSFiddle：http://jsfiddle.net/XALSn/2/

您会看到，当您选择输入 2 时，您会收到一个警报，但如果您单击，则会收到两个警报。理想情况下，对于我的场景，它需要是一个警报并忽略另一个。它似乎也没有真正集中。

提前感谢您的任何建议。

【问题讨论】：

鉴于点击会产生焦点，为什么需要点击事件？
这与可访问性以及人们如何使用 Utkanos 表单有关。谢谢。
@RobOwl 你能举一个你仍然需要点击事件的例子吗？
无需赘述，让您感到无聊，这完全取决于用户如何浏览网站/表单。我们理所当然地认为所有用户在使用网页时都处于一定的“技能水平”或能力，因此我们试图了解人们是否通过网站/表单点击或标签，以及我们如何改善用户的旅程基于此反馈的网站。希望这是有道理的，这不是最迷人的项目，但它很有趣。

标签： javascript jquery html onclick onfocus

【解决方案1】：

如何在焦点上设置一个标志，以便我们可以在焦点上触发并忽略点击，然后也监听焦点元素上的点击？有道理？看看demo jsFiddle - 如果您聚焦或点击未聚焦的.index2，它会触发聚焦事件并忽略点击。处于焦点时，点击它会触发点击。

我不知道你为什么想要这个（我无法想象有人会出于任何原因想要点击一个焦点元素（因为克拉已经在该领域中处于活跃状态）但是你去：

$(function () {
    $('.input2').on("click focus blur", function(e) {
        e.stopPropagation();
        if(e.type=="click"){
            if($(this).data("justfocussed")){
                $(this).data("justfocussed",false);
            } else {
                //I have been clicked on whilst in focus
                console.log("click");
            }
        } else if(e.type=="focus"){
            //I have been focussed on (either by clicking on whilst blurred or by tabbing to)
            console.log("focus");
            $(this).data("justfocussed",true);
        } else {
            //I no longer have focus
            console.log("blur");
            $(this).data("justfocussed",false);
        }
    });
});

http://jsfiddle.net/XALSn/12/

【讨论】：

这看起来不错 Moob 谢谢，点击和可以操纵的焦点之间有明显的区别。再次感谢。

【解决方案2】：

这可能不是最好的答案，但这是一种方法。我建议将标签索引添加到您的输入中，并在 当您从另一个输入模糊时触发焦点事件。

我已将其添加到此小提琴中： http://jsfiddle.net/XALSn/9/

$(function () {
    $('.input2').click(function(e) {
    alert("click");
    e.preventDefault();
});
});

$('input').blur(function(){
    $('input').focus(function() {
        alert("focus");
    });
});

【讨论】：

如果用户从不点击它怎么办？（也许他们没有鼠标）他们必须在第一次触发事件时使用 tab 键，然后再返回。
@Moob 好吧，在任何形式上，作为 UX 标准，您都应该关注第一个领域。应该始终有一个焦点。对于无障碍网站尤其如此。

【解决方案3】：

你可以使用我在 JS 中经常使用的一件事

var doSomething = true;

$(function () {
    $('.input2').click(function(e) {
        if (doSomething) {
        // do something :)
        }    
        doSomething = false;
    });
    $('.input2').focus(function() {
        if (doSomething) {
        // do something :)
        }
        doSomething = false;
    });
});

但是你必须在鼠标悬停或专注等时更改 doSomething 的值。:)

【讨论】：

【解决方案4】：

$(function () {
    var hasFocus = false;
    $("body")
    .off()
    .on({
        click : function()
        {
            if(!hasFocus)
            {
                hasFocus = true;
                alert("click");
            }
        },

        focus : function()
        {
            if(!hasFocus)
            {
                hasFocus = true;
                alert("focus");
            }
        }
    },".input2");
});

尝试设置标志 hasFocus 并采取相应措施

http://jsfiddle.net/AEVTQ/2/

【讨论】：

【解决方案5】：

只需在点击事件上添加 e.preventDefault()

$(function () {
    $('.input2').click(function(e) {
        console.log("click");
        e.preventDefault();
        e.stopPropagation();
    });
    $('.input2').focus(function() {
        console.log("focus");
    });
});

如果我理解您的问题，e.prevnetDefault() 将阻止浏览器自动关注点击。然后你可以用点击做一些不同于用焦点的事情

【讨论】：

我没有在其他浏览器上测试过，但在 Chrome 中至少焦点发生在点击之前。
我没有对你投反对票 Gisheri，但我之前尝试过但无济于事。