Блог

У меня есть содержащий div, который сам по себе действует как кнопка…

Однако при нажатии я настраиваю его на расширение и отображение дополнительной информации, в то же время открывая кнопку закрытия в правом верхнем углу…

Теперь, когда я нажимаю кнопку закрытия, выполняется функция закрытия, но также и onclick div для открытия, так что конечный результат, ну… Ничего не происходит…

Лол…

Пример с fiddle тоже не работает, и я нахожусь на грани срыва…

http://jsfiddle.net/VeyeY/5/

Вы могли бы либо вернуть false из onclick, чтобы закрыть div. Это гарантирует, что событие click не будет распространяться.

Другим решением было бы вызвать preventDefault() и stopPropagation() для самого события. Это также гарантирует, что событие не продолжится.

Редактировать:

Во всех происходящих событиях (onclick, onchange, onmouseover и т.д.) Всегда существует возможная переменная события, которую вы можете либо игнорировать, если хотите, либо извлекать информацию из. В вашем примере, я думаю, самым простым способом работы с переменной event было бы сделать что-то вроде этого:

 <div id="inner" onclick="toggle(false); event.preventDefault(); event.stopPropagation();">
  

Теперь на это немного некрасиво смотреть, и вы действительно не хотите иметь дело с этим в html-разметке, поэтому другим вариантом было бы передать переменную event в вашу функцию следующим образом:

 <div id="inner" onclick="toggle(event, false)">
  

и затем в javascript:

 function toggle(event, x){
    // Do your thing

    event.preventDefault();
    event.stopPropagation();
}
  

Есть много вещей, которые вы могли бы сделать с переменной event. Например, вместо передачи true или false вашей функции, вы могли бы проверить, какой узел инициировал событие следующим образом:

 if(event.originalTarget.id == "inner"){
    // Inner was clicked
}else if(event.originalTarget.id == "outer"){
    // Outer was clicked
}
  

ОБНОВЛЕНО, Вы можете:

1. Поставьте margin-top on #inner , чтобы пользователь не нажимал на оба одновременно (или какое-то смещение от верхнего края #outer ). (Обновление: отклонено, CSS-решение)

2. Или запустите другую функцию для каждого div , например innerToggle() и outerToggle() . Таким образом, вы даже можете вызвать один из другого. (Обновление: , что привело к решению 2a.)

   2a. Другой способ сделать это — просто запустить событие только для #outer ? Если #inner щелкнуть, событие всплывет и #outer вызовет переключение, как показано здесь.

3. Или отключите событие щелчка для одного или другого по мере необходимости. (Обновление: Смотрите решение @DanneMarne.)

4. Или установите пользовательское свойство для каждого объекта, например, $('outer').toggled = false которое будет записывать текущее состояние каждого объекта. (Обновление: неважно, не очень полезно).

Обновление: Итак, после небольшого тестирования я бы выбрал 2a.

Вы можете отключить функцию щелчка DIVs после раскрытия. И вы можете повторно включить эту функцию щелчка при нажатии кнопки закрытия.