使用 javascript 禁用 onclick 属性答案

【问题标题】：Disabling onclick attribute with javascript使用 javascript 禁用 onclick 属性
【发布时间】：2012-08-14 17:48:58
【问题描述】：

一旦其中一个被激活，我如何禁用另一个 onclick 事件。两个 div 都设置为 display:none;在 CSS 中。这可能真的很简单，但我是编程新手。

HTML

<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a>
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a>

Javascript

function showDiv(id)
{   
  if(id == "leftbutton"){
     document.getElementById('orangediv').style.display = 'block';
     }else{
     document.getElementById('greendiv').style.display = 'block';
}}

【问题讨论】：

与Remove onclick event from img tag 重复，技术上与How can I remove an inline onclick attribute with a bookmarklet? 相同。

标签： javascript css html onclick

【解决方案1】：

这应该可以解决问题：

function showDiv(id)
{   
  if(id == "leftbutton"){
     document.getElementById('orangediv').style.display = 'block';
     document.getElementById('righttbutton').onclick = null;
     }else{
     document.getElementById('greendiv').style.display = 'block';
     document.getElementById('leftbutton').onclick = null;
}}

【讨论】：

谢谢。我首先尝试了这个，它完成了我之前想做的事情。

【解决方案2】：

例如这样：

function showDiv(id){   

  if  (id == "leftbutton"){
  document.getElementById('orangediv').style.display = 'block';
  document.getElementById('rightbutton').onclick = "#";
}else{
  document.getElementById('greendiv').style.display = 'block';
  document.getElementById('leftbutton').onclick = "#";
}}

【讨论】：

【解决方案3】：

类似的东西：

function showDiv(id){   
var o = document.getElementById('orangediv');
var g = document.getElementById('greendiv');
if  (id == "leftbutton"){
     o.style.display = 'block';
}else{
    g.style.display = 'block';
}
o.writeAttribute('onclick','');
g.writeAttribute('onclick','');
}

【讨论】：

【解决方案4】：

只需将其他元素的onclick属性设置为null即可；

if  (id == "leftbutton"){
        document.getElementById('orangediv').style.display = 'block';
        document.getElementById('righttbutton').onclick = null;
    }
    else{
        document.getElementById('greendiv').style.display = 'block';
        document.getElementById('leftbutton').onclick = null;
    }
}

【讨论】：

【解决方案5】：

function showDiv(id) {
    if ( showDiv.executed ) {
        return false;
    }

    if  ( id === "leftbutton" ) {
       document.getElementById('orangediv').style.display = 'block';
    } else {
       document.getElementById('greendiv').style.display = 'block';
    }

    showDiv.executed = true;
}

showDiv.executed = false;

这样做，您总是可以通过简单地将showDiv.executed 设置为false 来重新启用显示。

【讨论】：

【解决方案6】：

您可以测试是否显示其他元素：

function showDiv(id)
{ 
  if  (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none'))
  {
      document.getElementById('orangediv').style.display = 'block';
  }
  else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none'))
  {
      document.getElementById('greendiv').style.display = 'block';
  }
}

【讨论】：

【解决方案7】：

您可以将 href 属性设置为 div 的 id，单击后应该可见。 showDiv 函数可以获取整个元素作为参数，然后您也可以访问它的属性。第二个参数可以是你应该隐藏的元素的 id，

   <a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a>
   <a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a>

在js中：

var showDiv =function(el, toHide){
  document.getElementById( el.href ).style.display = 'block';
  document.getElementById( toHide ).style.display = 'none';
  el.onclick = null; //remove onclick declaration from this anchor.

}

【讨论】：