Не работает событие клик arrow function this

Question

Столкнулся с проблемой

Хочу вызвать событие по нажатию на кнопку

const button = '.button';
const _active = 'button_active';
let reset;

$('.area').on('click', function() {
  // some code here
  $(this).trigger('spinButton');
});

$(button).on('click', () => {
  // some code here
  $(this).trigger('spinButton'); // ~~~~~~~~~~ здесь проблема ~~~~~~~~~~
});

$(button).on('spinButton', function() {
  const that = this;

  if (reset) clearTimeout(reset);
  $(that).addClass(active);
  reset = setTimeout(() => {
    $(that).removeClass(_active);
  }, 900);
});

.area {
  display: block;
  width: 200px;
  height: 200px;
  background: #ddd;
}

.button {
  width: 40px;
  margin: 50px 30px;
  cursor: pointer;
  padding: 20px 50px;
  background: #aaa;
}

.button_active {
  transition: all 0.9s ease 0s;
  transform: rotate(360deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="area"></span>
<div class="button">
  button
</div>

Answer 1

const button = '.button';
const _active = 'button_active';
let reset;

$('.area').on('click', function() {
  // some code here
  $(button).trigger('spinButton');
});

$(button).on('click', function() {
  // some code here
  $(this).trigger('spinButton');
});

$(button).on('spinButton', function() {
  const that = this;

  if (reset) clearTimeout(reset);
  $(that).addClass(_active);
  reset = setTimeout(() => {
    $(that).removeClass(_active);
  }, 900);
});

.area {
  display: block;
  width: 200px;
  height: 100px;
  background: #ddd;
}

.button {
  width: 40px;
  margin: 50px 30px;
  cursor: pointer;
  padding: 20px 50px;
  background: #aaa;
}

.button_active {
  transition: all 0.9s ease 0s;
  transform: rotate(360deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="area"></span>
<div class="button">
  button
</div>

Answer 2

Когда арров функцию пишешь, "this не работает", подробнее тута

В случае jq-events, пишешь либо так:

$('.button').on('click', ({currentTarget})=>{
    $(currentTarget).trigger('spinButton');
});

Либо так (если event нужен):

$('.button').on('click', (e)=>{
    $(e.currentTarget).trigger('spinButton');
});

БЛОГ НА HUSL

Не работает событие клик arrow function this

Ответы (2 шт):