javascript "onclick"事件仅在 Chrome 中失败

Question

我正在纠正一个有错误的网页，我检测到它在哪里，但我不知道依据。

这个js在Firefox和浏览器中运行完美，但在Chrome中不行。

那么，我们开始吧:

--HTML--

<div id='mesa' onclick='gotoSection( mesa  )' >

--JAVASCRIPT--

<script type="text/javascript"> 
    function gotoSection( section ){
        alert( section );
        $( '#section_container div' ).css( "display" , "none" );
        $( section ).css( "display" , "block" );
    }
</script>

--

因此，在 Firefox 中，警报显示“[object HTMLDivElement]”，但在 Chrome 中，警报显示“未定义”。

Answer 1

改变

<div id='mesa' onclick='gotoSection( mesa  )' >

至

<div id='mesa' onclick='gotoSection( this  )' >

请注意，当使用 jQuery 时，这会更惯用(它要求在执行这行代码之前定义元素):

$('#mesa').on('click', gotoSection);

<小时/>

编辑:

根据您的评论，现在很明显您的错误是您为多个元素提供了相同的 id。这是非法的，并且无法保证，无论使用什么浏览器，您将在 哪个 元素上使用 $('#mesa') .

这里是一个解决方案的例子:

<div id=mesaOpener> ... </div>
<div id=anotherDivOpener> ... </div>

 <div id=mesa> ... </div>
<div id=anotherDiv> ... </div>

<script type="text/javascript">
  $(function(){
    $('[id$=Opener]').on('click', function(){
        $('#section_container div' ).hide();
        $('#'+this.id.slice(0,4)).show();
    });
  });
</script>

点击<somename>Opener显示 div <somename> .