在锚点触发“点击”之前不应该输入触发“聚焦”事件吗?

时间:2019-01-11 17:08:03

标签: javascript html

我遇到这样的情况,锚点在输入之前触发“ click”事件,这会失去焦点并触发“ focusout”事件。

为清楚起见,我在输入中写了一些内容,然后单击锚点。我希望先将“ focusout”事件写入控制台,然后再写入“ click”事件。

我无法像下面的代码那样在虚拟应用程序中复制此代码,它只能在我正在使用的Web应用程序中复制,我不能在此处分享。

<a href="#" id="a">click me</a>
<input type="text" id="t">

<script>
document.querySelector("#a").addEventListener('click', function(e) {
  console.log('click');
});

document.querySelector("#t").addEventListener('focusout', function(e) {
  console.log('focusout');
});
</script>

有什么主意,锚可能如何在输入触发“聚焦”事件之前先触发“点击”事件?

我真是眼花how乱……实际上,即使我愿意,我也看不到世界上如何能够首先使“点击”射击。我在Chrome开发者工具的观察程序中检查了几次事件对象,但看不到任何奇怪的东西

我正在Windows 10上使用最新的Chrome

3 个答案:

答案 0 :(得分:0)

change失去焦点之前,不会触发input事件。您可以改用onkeypress

答案 1 :(得分:0)

具有讽刺意味的是,似乎jQuery .focusout / .click conflict与您有完全相反的问题。从我在网络上阅读的内容来看,似乎总的共识是HTML规范实际上没有指定事件的顺序,并且取决于浏览器是否实现它们。但是,在您的情况下,我肯定会希望首先发生焦点对准,但显然不是这样。您是否尝试过“ onblur”?

答案 2 :(得分:0)

我找到了!这是会让您睡不好觉的事情之一。

问题出在其他地方,在某些库中,锚点上有一个so this is the pagination script and all other content is also in the same page <script type="text/javascript"> $(document).ready(function(){ var show_per_page = 9; var number_of_items = $('#content').children().size(); var number_of_pages = Math.ceil(number_of_items/show_per_page); $('#current_page').val(0); $('#show_per_page').val(show_per_page); var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>'; var current_link = 0; while(number_of_pages > current_link){ navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>'; current_link++; } navigation_html += '<a class="next_link" href="javascript:next();">Next</a>'; $('#page_navigation').html(navigation_html); $('#page_navigation .index.php:first').addClass('active_page'); $('#content').children().css('display', 'none'); $('#content').children().slice(0, show_per_page).css('display', 'block'); }); function previous(){ new_page = parseInt($('#current_page').val()) - 1; if($('.active_page').prev('.page_link').length==true){ go_to_page(new_page); } } function next(){ new_page = parseInt($('#current_page').val()) + 1; if($('.active_page').next('.page_link').length==true){ go_to_page(new_page); } } function go_to_page(page_num){ var show_per_page = parseInt($('#show_per_page').val()); start_from = page_num * show_per_page; end_on = start_from + show_per_page; $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block'); $('.page_link[longdesc=' + page_num +']').addClass('index.php').siblings('.page2.php').removeClass('active_page'); $('#current_page').val(page_num); } </script> 处理程序,mousedown

http://jsfiddle.net/vynd7kgj/

这太糟了。我不知道该哭还是该笑。

您为什么要这样做?