Checkbox в сНу OnClick поведение отличается между IE и Chrome

Question

У меня есть следующий код:

<div style="cursor:pointer" onclick="alert('div clicked');"> 
     <input 
      type="checkbox" 
      onclick="alert('checkbox clicked');" 
      style="pointer-events:none"> 
      Show Retired Products 
    </div> 

Here's the JSFiddle for it

Когда я нажимаю DIV (например, нажав на кнопку «Показать списанных продуктов "text), он правильно запускает событие onclick для div в обоих браузерах. Однако, если я нажму на фактический флажок, поведение между Chrome и IE будет отличаться.

В Chrome, когда я нажимаю фактический флажок, onclick ввода никогда не срабатывает, а также не изменяется состояние флажка. Тем не менее, событие onclick для div не срабатывает.

В IE, когда я нажимаю фактический флажок, сначала запускается событие onclick checkbox, а затем происходит событие onclick div (что может быть предотвращено с помощью event.stopPropagation, если я хочу).

Почему вход не переключается в Chrome? Как я могу заставить их вести себя одинаково? Какой браузер на самом деле работает «правильно»?

В случае, если это имеет значение, Chrome - это версия 40.0.2214.93, а IE - 11.0.9600.17498.

Просто протестирован в Firefox 32.0 и он идентичен функциям Chrome.

Answer 1

Указатель-событие: нет; поддерживается в IE11 +, даже в IE11 он имеет какое-то странное поведение. Один из способов - использовать прозрачный оверлей для отключения флажка.

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: #fff; 
    opacity: 0; 
} 

here's the fiddle