Question

我希望用户点击一次，然后我会使用一些CSS突出显示他们选择的角色，然后他们会再次点击相同的中文字符，听到字符音调响起。

要复制它，请转到此站点： http://shawnwow.com/chineseCharacterHelpr/

我正在使用chrome（不确定是否重要）以及是否输入＆＃34; mao＆＃34;或者其他任何东西，点击相同的角色几次，你会看到它第一次做它应该做的（播放0次），第二次（播放1次），然后我点击第三次一行，然后播放音频2次，然后播放3次，然后播放4次，依此类推。

我认为这与我嵌套点击的事实有关（这很糟糕，正如我所读到的那样），但我想要这个功能，但不知道还能做什么。也许我可以拥有第二个.click是一个悬停，但后来我不知道该怎么做移动设备。

这是代码直接;它从第32行开始：

https://github.com/olmansju/chineseCharacterHelpr/blob/master/JS/scripts.js

Answer 1

您的代码可以用伪代码总结如下

if click on list item then
  attach another click handler on list item

因此，在多次点击时，会附加多个点击处理程序。将解决您的问题的伪代码如下

if click on list item then
  detach any existing click handler
  attach another click handler on list item

以下是一些实现此

的代码

var clickHandler = function () {
  console.log(selectedCharacter);
  responsiveVoice.speak(selectedCharacter, 'Chinese Female');
}
$(this).off("click", clickHandler);
$(this).on("click", clickHandler);

这将解决您的问题，但它不是处理事件处理程序的最佳方式。也许，您应该为整个列表创建单选按钮，并提供一个可以播放所选字符声音的按钮。

嵌套的点击事件导致内部函数重复

1 个答案: