javascript:onClick();不适用于 Firefox 和 IE

Question

我有这个可伸缩的侧边栏菜单。 javascript onClick 充当缩回功能。但是，它似乎在 Chrome/Safari 中工作得很好，但在 IE 和 Firefox 中却不行。它只会在 IE 和 Firefox 中返回 false，并且在 IE 和 Firefox 中也有一些视觉上的毁容按钮。

请点击图片以获得更好的可视化效果: http://i.imgur.com/dOI8qMz.jpg

 <a href="javascript:onClick();" class="angle icon-double-angle-left"></a>

//.JS文件页面

var onClick = function () {
  var sidebar = document.querySelector('.sidebar');
  var body = document.querySelector('.body');
  var angle = document.querySelector('.angle');
  var classNames = document.querySelector('.sidebar').className;
  if(classNames.indexOf('maximized') > -1) {
    sidebar.className = 'sidebar';
    body.className = 'body minimized';
    angle.className = 'angle icon-double-angle-right';
  } else {
    sidebar.className = 'sidebar maximized';
    body.className = 'body';
    angle.className = 'angle icon-double-angle-left';
  }
  return false;
};

Answer 1

强烈建议将 JS 和 HTML 分开。并且没有添加或调用 JS 语句或函数内联 HTML。所以你可以通过js在元素上绑定(bind)事件处理器。

为什么 JS 在 href 上给出，所以它不执行它的默认行为重定向。您可以通过 .preventDefault() 方法处理。

所以如果你使用 jquery 你可以这样做

$("a.angle").click(function(e){
  e.preventDefault(); //this will avoid the default behaviour of tag
  //than do other things
});

或者如果你想用纯 javascript 来做

var clickMethod=function(e){
      e=e||window.event; //for ie <9 support
      e.preventDefault();
      //do something
};

var element=document.queryselectorAll("a.angle");
 /* querySelectorAll method is not supported by ie<8 so use other DOM selector
     method of JS if you want to support ie<8; */

//for ie<10
element.attachEvent('onclick',clickMethod);

//for other browser
element.assignEventListner('click',clickMethod,false);