Question

我有这个可伸缩的侧边栏菜单。一个javascript onClick充当缩进功能。但是，它似乎在Chrome / Safari中完全正常，但在IE和Firefox中却没有。它只会在IE和Firefox中返回false，并且在IE和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

我认为问题是你的函数名，onClick。声明全局变量var foo = 1与声明window.foo = 1相同，所以基本上是覆盖window.onClick事件处理程序。即使在这种特殊情况下这不是问题，但它最多也是一个令人困惑的函数名称。

Answer 2

强烈建议保持JS和HTML分离。并且不添加或调用JS语句或函数内联HTML。因此，您可以通过js绑定元素上的事件处理程序。

为什么在href上给出了JS，所以它不会执行默认的行为重定向。您可以通过.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);

Answer 3

让我给你一个建议，请尽量不要混合html和JS代码，所以在你的JS代码中定义类似的东西：

var element = document.querySelector('a.angle');
element.onclick = function(e){ 
    e.preventDefault();
    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';
    }
};

的javascript：的onClick（）;不在firefox和IE中工作

3 个答案: