调用 onclick 函数时显示 2 个或更多字符答案

【问题标题】：2 and more characters are shown when onclick function is called调用 onclick 函数时显示 2 个或更多字符
【发布时间】：2016-05-12 11:00:29
【问题描述】：

功能：

用户必须点击屏幕上绘制的键盘小键盘来输入姓名和电子邮件。然后字符会显示在输入框中。

做了什么：

创建了 html 键盘和键盘脚本。因此，在功能上，键盘已显示并且键盘功能正在运行。

问题：

当页面第一次加载时，键盘功能正常工作，因此当页面加载时，当用户点击键盘时，字符就会显示出来。但是，在闲置一段时间后，当用户使用键盘时，显示的字符显示不正确。

因此，错误特征是这样的：例如，如果用户单击键盘上的字符“c”，那么正确地，“c”应该显示在输入框中，但是，此时当用户单击“ c'，输入框显示多个'c'。

我不知道发生了什么，我该如何纠正这个问题。此问题仅在闲置一段时间后发生。

function Start() {


  //Method  call to slide and fade in second page to the left padding
  $('#Email_Page').fadeIn({
    duration: slideDuration,
    queue: false,
    complete: function() {

      //Keyboard Script
      $('#keyboard li').click(function() {
        console.log("click");
        idleTime = 0;

        var $this = $(this),
          character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
        console.log(character);
        // Shift keys
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
          $('.letter').toggleClass('uppercase');
          $('.symbol span').toggle();

          shift = (shift === true) ? false : true;
          capslock = false;
          return false;
        }

        // Caps lock
        if ($this.hasClass('capslock')) {
          $('.letter').toggleClass('uppercase');
          capslock = true;
          return false;
        }

        // Delete
        if ($this.hasClass('delete')) {
          var html = $write.val();

          $write.val(html.substr(0, html.length - 1));
          return false;
        }

        // Clear
        if ($this.hasClass('clear')) {
          var html = $write.val();

          $write.val("");
          return false;
        }

        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        if ($this.hasClass('space')) character = ' ';
        if ($this.hasClass('tab')) character = "\t";
        if ($this.hasClass('return')) character = "\n";

        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();

        // Remove shift once a key is clicked.
        if (shift === true) {
          $('.symbol span').toggle();
          if (capslock === false) $('.letter').toggleClass('uppercase');

          shift = false;
        }

        // Add the character
        $write.val($write.val() + character);
      });

    }
  });
}

// Keyboard CSS
 .keyboard {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
}
.keyboard li {
  font-size: 30px;
  float: left;
  margin: 2 2 2 2;
  width: 70px;
  height: 70px;
  line-height: 80px;
  text-align: center;
  color: #716b6c;
  background: #e3d7d8;
  border: 1px solid #f9f9f9;
  -moz-border-radius: 5px;
  list-style: none;
  -webkit-border-radius: 5px;
}
.capslock,
.tab,
.left-shift {
  clear: left;
}
.keyboard .tab,
.keyboard .delete {
  width: 165px;
}
.keyboard .capslock {
  width: 101px;
}
.keyboard .return {
  width: 101px;
}
.keyboard .left-shift {
  width: 165px;
}
.keyboard .right-shift {
  width: 165px;
}
.lastitem {
  margin-right: 0;
}
.uppercase {
  text-transform: uppercase;
}
.keyboard .space {
  clear: left;
  width: 750px;
}
.on {
  display: none;
}
.keyboard li:hover {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #e5e5e5;
  cursor: pointer;
}

<!--Email Buttons-->
<table align="center" cellspacing="0" cellpadding="0" width="1080" top="550px">
  <tr style="height: 1920;">
    <td width="1080">

      <ul class="keyboard" id="keyboard" style="z-index:2; position:absolute;left:120px; top:850px; color: #000000;">
        <font face="CenturyGothic"><li class="symbol"><span class="off">1</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">2</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">3</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">4</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">5</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">6</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">7</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">8</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">9</span></li></font>
        <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">0</span></li></font>

        <font face="CenturyGothic"><li class="letter" style="clear: left;">q</li></font>
        <font face="CenturyGothic"><li class="letter">w</li></font>
        <font face="CenturyGothic"><li class="letter">e</li></font>
        <font face="CenturyGothic"><li class="letter">r</li></font>
        <font face="CenturyGothic"><li class="letter">t</li></font>
        <font face="CenturyGothic"><li class="letter">y</li></font>
        <font face="CenturyGothic"><li class="letter">u</li></font>
        <font face="CenturyGothic"><li class="letter">i</li></font>
        <font face="CenturyGothic"><li class="letter">o</li></font>
        <font face="CenturyGothic"><li class="letter lastitem">p</li></font>

        <font face="CenturyGothic"><li class="letter" style="clear: left;">a</li></font>
        <font face="CenturyGothic"><li class="letter">s</li></font>
        <font face="CenturyGothic"><li class="letter">d</li></font>
        <font face="CenturyGothic"><li class="letter">f</li></font>
        <font face="CenturyGothic"><li class="letter">g</li></font>
        <font face="CenturyGothic"><li class="letter">h</li></font>
        <font face="CenturyGothic"><li class="letter">j</li></font>
        <font face="CenturyGothic"><li class="letter">k</li></font>
        <font face="CenturyGothic"><li class="letter">l</li></font>
        <font face="CenturyGothic"><li class="letter lastitem">z</li></font>

        <font face="CenturyGothic"><li class="letter" style="clear: left;">x</li></font>
        <font face="CenturyGothic"><li class="letter">c</li></font>
        <font face="CenturyGothic"><li class="letter">v</li></font>
        <font face="CenturyGothic"><li class="letter">b</li></font>
        <font face="CenturyGothic"><li class="letter">n</li></fint>
                            <font face ="CenturyGothic"><li class="letter">m</li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">@</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">.</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">-</span></li></font>
        <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">_</span></li></font>

        <font face="CenturyGothic"><li class="symbol" style="clear: left; width: 85px;"><span class="off">.com</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="width: 215px;"><span class="off">@hotmail.com</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="width: 215px;"><span class="off">@yahoo.com</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="width: 215px;"><span class="off">@gmail.com</span></li></font>

        <font face="CenturyGothic"><li class="clear" style=" clear: left; width: 370px;">Clear</li></font>
        <font face="CenturyGothic"> <li class="delete lastitem" style="width: 370px;">Delete</li></font>

        <font face="CenturyGothic"><li class="space lastitem">Space &nbsp;</li></font>
      </ul>
    </td>
  </tr>
</table>

【问题讨论】：

您只能使用bind绑定一次点击事件。而不是每次off 和on 事件。

标签： javascript jquery html keyboard

【解决方案1】：

每次#Email_Page 淡入时，您都会注册click 事件。

在添加新事件之前先删除事件：

//Method  call to slide and fade in second page to the left padding
$('#Email_Page').fadeIn({
    duration: slideDuration,
    queue: false,
    complete: function() {

        //Keyboard Script
        $('#keyboard li').off('click').on('click',function() {    
            ..........
            etc etc .....

【讨论】：

谢谢，只是想问一个理论问题，因此，对于每个 onclick 输入，当“选择器”淡入时，您是否必须先删除该事件才能添加新事件？？
如果你多次调用$('#keyboard li').click(function(){....})（示例=两次），它会将2个匿名函数绑定到clickli上的事件。所以如果你点击li，就会调用这两个函数。
在您的代码中，每次Email_Page 淡入时，都会将一个新的匿名函数附加到li 的click 事件。
最后一个问题，dblclick 函数调用的语法也会相同吗？