JS函数调用替换为另一个

Question

我遇到一个奇怪的问题，其中我的一个函数（removeTransition）被忽略，另一个函数被称为（addTransition）。这里发生了什么？

添加了一个片段而不是外部codepen来提问：

   const example = document.querySelector('#myExample');

    function addTransition () {
      example.classList.add('transition');
      console.log('addTransition',example);
    }

    function removeTransition () {
      example.classList.remove('transition');
      console.log('removeTransition',example);
    }

    const el = document.querySelector('.example');
    const output = document.querySelector('#output');

    el.addEventListener('transitionend', function() {
      output.textContent = 'Transition ended'; 
    });

    document.addEventListener('click', addTransition);

 .example {
      width: 100px;
      height: 50px;
      background: pink;
      transition-property: transform background;
      transition-duration: 2s;
      transition-delay: 1s;
    }

    .transition {
      background: cyan;
      width: 200px;
    }

    .transition::after {
      content: 'Transition class added'
    }

    <div id="myExample" class="example"></div>
    <br>
    <button onClick="addTransition">Add</button>
    <button onClick="removeTransition">Remove</button>
    <div id="output"></div>

 

Answer 1

有两件事发生：

1. 老式onxyz-属性样式的事件处理程序需要调用函数，而不仅仅是引用它。因此，您需要在这些上使用()：

   <button onClick="addTransition">Add</button>
   <!--                          ^---- missing ()    -->
   <button onClick="removeTransition">Remove</button>
   <!--                             ^---- missing () -->
   

2. 在文档中任何地方单击时，您正在呼叫addTransition：

   document.addEventListener('click', addTransition)
   

要修复它：

1. 甚至不使用属性样式甚至代替。
2. 使用addEventListener连接您的处理程序。
3. 让他们停止事件的传播。
4. 删除您在document（？）上拥有的处理程序。我不知道这意味着什么。

类似这样的东西：

const example = document.querySelector('#myExample');

function addTransition() {
    example.classList.add('transition');
    console.log('addTransition', example);
}

function removeTransition() {
    example.classList.remove('transition');
    console.log('removeTransition', example);
}

const el = document.querySelector('.example');
const output = document.querySelector('#output');

el.addEventListener('transitionend', function() {
    output.textContent = 'Transition ended';
});

document.querySelector("button.add").addEventListener("click", (e) => {
  e.stopPropagation();
  addTransition();
});
document.querySelector("button.remove").addEventListener("click", (e) => {
  e.stopPropagation();
  removeTransition();
});

// Possibly remove this?
document.addEventListener('click', addTransition);

.example {
  width: 100px;
  height: 50px;
  background: pink;
  transition-property: transform background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition {
  background: cyan;
  width: 200px;
}

.transition::after {
  content: 'Transition class added'
}

<div id="myExample" class="example"></div>
<br>
<button class="add">Add</button>
<button class="remove">Remove</button>
<div id="output"></div>

如果您确实愿意，您可以使用那些属性处理程序来做到这一点，

const example = document.querySelector('#myExample');

function addTransition() {
    example.classList.add('transition');
    console.log('addTransition', example);
}

function removeTransition() {
    example.classList.remove('transition');
    console.log('removeTransition', example);
}

const el = document.querySelector('.example');
const output = document.querySelector('#output');

el.addEventListener('transitionend', function() {
    output.textContent = 'Transition ended';
});

// Possibly remove this?
document.addEventListener('click', addTransition);

.example {
  width: 100px;
  height: 50px;
  background: pink;
  transition-property: transform background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition {
  background: cyan;
  width: 200px;
}

.transition::after {
  content: 'Transition class added'
}

<div id="myExample" class="example"></div>
<br>
<button onclick="addTransition(); event.stopPropagation();">Add</button>
<button onclick="removeTransition(); event.stopPropagation();">Remove</button>
<div id="output"></div>

但是我不建议这样做，尤其是因为您的函数必须是全局函数，而避免使用全局函数是一件好事。 ;-）