Открыть Аккордеон только по щелчку правого символа

Question

Я бы хотел отключить событие click, которое открывает аккордеон, если я нажимаю в любом месте заголовка. Вместо этого я хотел бы щелкнуть только по самому большому символу .... Здесь это открытие, если я нажму на кнопку Сохранить ..

<accordion-group is-open="status.open" template-url="accordion-group.html"> 
     <accordion-heading> 
      I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </accordion-heading> 
     This is just some content to illustrate fancy headings. 
    </accordion-group> 

Вот plunker ..

link

Answer 1

в вашем HTML файле я изменен:

<accordion close-others="oneAtATime"> 
    <accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html"> 
     <accordion-heading style="pointer-events:none !important;"> 
      I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </accordion-heading> 
     This is just some content to illustrate fancy headings. 
    </accordion-group> 
    </accordion> 

Вы должны добавить свойство css: «pointer-events: none! Important» на элементах, на которые вы не будете реагировать на событие мыши и установите «указатель-события: автоматически! Важно» только на вашем значке значка , Аккордеон следует открывать только при нажатии на значок стрелки. Это должно работать :)

Чтобы сделать ваше решение более изящным вы можете сделать классы CSS, как:

.disable-click-event { 
    pointer-events: none !important; 
} 

.enable-click-event { 
    pointer-events: auto !important; 
} 

Там также вариант, который предотвращает кипящий событие ($ event.stopPropagation()), но в этом случае я не знаю, где именно вызвано событие, поэтому для его поиска требуется сложное исследование.

Еще один совет: если какие-либо проблемы могут быть решены с помощью CSS вместо JS, это стоит того, чтобы это сделать :) События JavaScript не так легко отлаживаются, поэтому исправление CSS будет намного быстрее найти, чем грязная ошибка с событием пузыриться. Я могу порекомендовать вам использовать простые CSS-решения с чистой совестью :) cheers