jQuery: сделайте div кликабельным, чтобы проверить вложенный флажок

Question

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#myDiv').click(function() {
            var checkBox = $(this).children("input[type='checkbox']");
            checkBox.attr('checked', !checkBox.attr('checked'))
        });
    });
</script>

<div id="myDiv" style="background-color:red;height:50px;width:50px;">
    <input type="checkbox" />
</div>

У меня проблемы с активацией div, чтобы он проверял вложенный флажок. Я хотел бы сделать так, чтобы эта функция работала, только если мышь не наведена на флажок. Как я могу это сделать? Как то так:

if (!checkBox.isHover)
    checkBox.attr('checked', !checkBox.attr('checked'))

Обратите внимание, что этот вопрос задавался здесь ранее, но ответы, похоже, не решили проблему. Обернутый ярлык не работает должным образом в FireFox. Спасибо.

Answer 1

Попробуйте это:

$('#myDiv').click(function(evt) {
  if (evt.target.type !== 'checkbox') {
    var $checkbox = $(":checkbox", this);
    $checkbox.attr('checked', !$checkbox.attr('checked'));
    evt.stopPropagation();
    return false;
  }
});

Не проверено, но я просто успешно использовал что-то подобное в проекте.

Answer 2

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#myDiv').click(function(e) {
            e.stopPropagation();
            var checkBox = $(this).children("input[type='checkbox']");
            checkBox.attr('checked', !checkBox.attr('checked'))
        });
    });
</script>

Answer 3

Проблема в том, что если вы на самом деле нажмете на флажок, он все равно будет вызывать событие click при всплывающем окне div-события. Вы можете добавить событие щелчка к флажку, который останавливает всплывание, таким образом, только div привязывается к событию.