Javascript Jquery-区分'；单击'；和'；焦点'；在使用这两种方法时使用相同的输入

如果输入被点击，我试图触发一个事件；如果输入进入焦点，我试图触发一个事件

我遇到的问题是防止事件在单击时触发两次，因为显然，单击输入也会使事件处于焦点。我在jfiddle上放了一个非常宽松的版本，向您展示了我的意思，代码如下：

HTML:

JSFiddle：

您将看到，当您使用tab键输入2时，您会收到一个警报，但如果单击，则会收到两个警报。理想情况下，对于我的场景，它需要一个警报而忽略另一个。它似乎也没有真正聚焦

提前感谢您的建议。

只需在单击事件中添加e.preventDefault（）

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

---

如果我没有弄错你的问题，e.prevnetDefault（）将阻止浏览器自动关注单击。然后你可以通过点击来做一些与聚焦不同的事情，这可能不是最好的答案，但这是一种方法。我建议将选项卡索引添加到输入中，并在模糊另一输入时触发焦点事件

我在这把小提琴上加了一句：

---

你可以使用我在JS中经常使用的一个东西

var doSomething = true;

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

但您必须更改鼠标上或foucs上的doSomething值，等等：）

尝试设置一个标志hasFocus并相应地采取行动

---

在焦点上设置一个标志，这样我们就可以在焦点上触发并忽略点击，但同时也可以监听对焦点元素的点击，怎么样？有道理？查看-如果聚焦或单击未聚焦的

.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);
        }
    });
});

---

既然点击可以提供焦点，为什么需要点击事件？这与可访问性和人们如何使用表单有关。谢谢。@RobOwl你能举一个例子说明你还需要点击事件吗？不要太详细，也不要让你感到厌烦，这都是关于用户如何浏览网站/表单的。我们理所当然地认为，所有用户都需要点击事件我们在使用网页时具有一定的“技能水平”或能力，因此我们试图了解人们是否点击或标签浏览网站/表单，以及我们如何根据这些反馈改进网站的旅程。希望这是有意义的，这不是最吸引人的项目，但很有趣。如果用户从未点击过它怎么办？（也许他们没有老鼠）他们必须先签入、签出，然后再签入，才能第一次触发事件。@Moob好吧，在任何形式上，作为用户体验标准，你都应该关注第一个字段。应该总是有一个焦点。特别是对于可访问性网站。我没有在其他浏览器上测试过这一点，但在Chrome中，至少在点击之前会有焦点。我没有关闭投你一票，Gisheri，我以前试过，但没用。这看起来不错，Moob谢谢，点击和焦点之间有明显的区别，可以操纵。再次感谢。

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

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

var doSomething = true;

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

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

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

$(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);
        }
    });
});