event.target messing up button area

Question

Я использую следующий код для запуска события.

'click .btn-zoom':function(e){ 
    e.preventDefault; 
    var zoomFont = parseInt($('pre code').css('font-size')) + 2; 
    if(zoomFont <= 25) { 
     $(e.target).parent('code').css('font-size', zoomFont); 
//  $('pre code').css('font-size', zoomFont); //Alternative code 
    } 
}, 

<button class="btn-zoom"><i class="plus icon"></button> это кнопка разметки.

Самое смешное, когда я использую верхний код $(e.target)...., кнопка активирует только когда я нажимаю границы внутри кнопкиисключая на значок сам. Упрощенный, если я нажимаю именно на границе значка, он НЕ активируется.

Если я использую альтернативный код, упомянутый выше, он будет срабатывать везде, где я нажимаю кнопку.

Есть ли способ исправить это? Мне нужно использовать e.target, потому что я планирую иметь в шаблоне более одного code.

Answer 1

Если щелкнуть значок, ваш e.target является:

<i class="plus icon">

При нажатии на кнопку, ваш e.target является:

<button class="btn-zoom">

Поскольку вы используете $(e.target).parent, то только если вы нажмете кнопку, потому что я предполагаю, что родительский элемент кнопки - pre code, а родительский значок - фактически <button class="btn-zoom">.

Причина, по которой ваш альтернативный код работает, заключается в том, что вы напрямую обращаетесь к pre code, не полагаясь на поведение parent.

Хорошим способом исправить это может быть изменение вашего css для btn-zoom, чтобы включить значок (используя что-то вроде свойства background). Таким образом, вы по-прежнему нажимаете на фактическую кнопку, независимо от того, нажали ли вы на значок или нет.