在单击/更改单选按钮之前，焦点正在运行。 是否可以在焦点之前运行点击/更改？

下面你将看到我正在处理的代码和一个包含的JSFiddle。

问题：

1. 焦点在点击/更改之前运行，因此在选择单选按钮之前边距正在移动。

请解释一下代码，以便我可以从中学习。 如果您没有解决方案，任何提示或方向也会有所帮助。 提前致谢！

http://jsfiddle.net/nLgqhqwc/6/

HTML

  
 
  
 
  option  
 
  
 
   

CSS

 .panel{ padding:15px; background:grey; margin-bottom:15px; } .panel-primary{ margin:0 15px 0 15px; background:blue; margin-bottom:15px; } 

jQuery的

 $(document).ready(function () { $('.panel').click(function () { event.stopPropagation(); $('.panel').removeClass('panel-primary'); $(this).addClass('panel-primary'); }); $('input, select').bind('focus blur', function (event) { event.stopPropagation(); $('.panel').removeClass('panel-primary'); $(this).closest(".panel").addClass('panel-primary'); }); $('input[type=radio]').change(function () { event.stopPropagation(); $('.panel').removeClass('panel-primary mrgn-lft-lg'); $(this).closest(".panel").addClass('panel-primary'); }); }); 

Answer 1

您可以在用户.panel时触发事件。 为此，您必须替换点击：

 $('.panel').click(function () { 

click OR hover with the mouse 。 就是那样：

 $('.panel').on('click mouseover',function () { 

以下是示例小提琴： http ： //jsfiddle.net/nLgqhqwc/10/

其他方式

如果没有聚焦，请将填充更宽。 这样.panel的内容不会移动（用户可以轻松点击），边距仍然存在：

 .panel{ padding:15px 30px; } .panel-primary { margin:0 15px 0 15px; padding: 15px; } 

链接： http ： //jsfiddle.net/nLgqhqwc/11/

Answer 2

您必须在捕获阶段监听click事件。 你可以做：

document.querySelector('.panel').addEventListener('click', doSomething, true);

看看这里了解捕获和冒泡阶段的区别。

主要问题是你不会使用jQuery。

并非所有浏览器都支持事件捕获（例如，小于9的Internet Explorer版本不支持），但所有浏览器都支持事件冒泡，这就是为什么它是用于将处理程序绑定到所有跨浏览器抽象中的事件的阶段，包括jQuery。 jQuery相当于JavaScript的addEventListener方法

因此，您不应该关注事件顺序。 你可以解决简单问题 。