jquery点击和焦点有什么区别？

Question

$('#birthday_y').focus(function() {
    if (!$(this).val()){
        $(this).val('1980');
    }
});

上面的代码可以设置一个选择框到1980年＆＃39;有突出显示，而以下代码没有工作？你可以解释一下吗？

$('#birthday_y').click(function() {
    if (!$(this).val()){
        $(this).val('1980');
    }
});

Answer 1

如果一次只有代码中的两个处理程序，当您即将单击时，焦点处理程序已经执行，因此它不会进入if (!$(this).val()){阻止。

Answer 2

  

焦点与点击之间的差异

当场变焦时会发生焦点事件。是通过点击该元素进行聚焦，还是通过按Tab键聚焦。

在该事件上使用鼠标单击时会发生Click事件。点击后关注该元素是浏览器行为。

在您的代码中，

第一个例子。

在第一个示例中。只有在字段聚焦时才会触发焦点事件。无论你多少次点击该元素。

＆＃13;

＆＃13;

$('#birthday_y').focus(function() {
  console.log("clicked")
  if (!$(this).val()) {
    $(this).val('1980');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="birthday_y">

＆＃13;

＆＃13;

＆＃13;

第二个例子。

在第二个例子中。点击它时，点击事件会被触发，无论元素是否被聚焦。

＆＃13;

＆＃13;

$('#birthday_y').focus(function() {
    console.log("focused")
    if (!$(this).val()){
        $(this).val('1980');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="birthday_y">

＆＃13;

＆＃13;

＆＃13;

作为突出显示的问题，它完全取决于浏览器的行为，如果您想要统一的行为，您可以使用自己的脚本来选择所有焦点。

Answer 3

当您点击输入时，它们都可以正常工作。看一下这个jsfiddle。

除非你的birthday_y元素是输入。

＆＃13;

＆＃13;

$('#birthday_y').click(function() {
    if (!$(this).val()){
        $(this).val('1980');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<input id="birthday_y" />    

＆＃13;

＆＃13;

＆＃13;

请查看this帖子，了解点击和焦点之间差异的详细信息。