Question

我的html页面上有一个导航栏。当用户点击某个项目时，我会更改div的内容。问题是，如果用户快速连续多次点击某个项目，则div的内容也会多次更改。我想要的是，当用户多次快速点击某个项目时，只更改一次内容。

感谢任何帮助。

编辑：

我正在使用带有onclick属性的Bootstrap菜单来相应地更改一些内容。

HTML

<ul class="nav nav-tabs">
    <li><a href="#" onclick="changeContent(this)">Home</a></li>
    <li><a href="#" onclick="changeContent(this)">Menu 1</a></li>
    <li><a href="#" onclick="changeContent(this)">Menu 2</a></li>
    <li><a href="#" onclick="changeContent(this)">Menu 3</a></li>
</ul>

JS

function changeContent(item){
    //changing parent content-just for demo
    $(this).parent.html("Some content");
}

因此，如果用户快速多次点击某个项目，则内容将对每次点击进行多次更改。我希望内容只需一次更改即可进行多次快速点击。

Answer 1

每秒点击一次。这是为了避免用户像疯了一样点击。

使用onclick

removeAttr

使用setTimeout在x interval

function changeContent(elem, num) {
  var that = $(elem);
  that.parent().append("Some content"+num);

  that.removeAttr('onclick');
  setTimeout(function() {
    that.attr('onclick', 'changeContent(this,'+num+')');
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<ul class="nav nav-tabs">
  <li><a href="#" onclick="changeContent(this, 123)">Home</a> 
  </li>
  <li><a href="#" onclick="changeContent(this, 432)">Menu 1</a> 
  </li>
  <li><a href="#" onclick="changeContent(this, 545)">Menu 2</a> 
  </li>
  <li><a href="#" onclick="changeContent(this, 765)">Menu 3</a> 
  </li>
</ul>

Answer 2

您可以设置一个标志并检查是否已设置，不要触发该功能。

var userClicked = false;
onClick = function () {
if (!userClicked)
  // Perform the operation.
  displayTab();
else
  // Do nothing
  return false;
}

避免在导航栏上多次点击html / javascript

2 个答案: