cannot trigger click event use mouse

by Aires Liu   Last Updated January 14, 2018 08:05 AM

The code:

<body>
<div id="navigator">
    <div id="nav-back"><img src="img/back.png" height="200" width="200"/></div>
    <div id="nav-forward"><img src="img/forward.png" height="200" width="200"/></div>
    <div id="nav-refresh"><img src="img/refresh.png" height="200" width="200"/></div>
</div>
<iframe id="wrapper" name="wrapper" src="http://XXX.com/" frameborder="0" allowfullscreen="true"></iframe>

<script>

    let div_nav_back = document.getElementById('nav-back');
    let div_nav_forward = document.getElementById('nav-forward');
    let div_nav_refresh = document.getElementById('nav-refresh');
    div_nav_back.addEventListener('click', () => {
        wrapper.history.back();
        console.log('click!');
    });
    div_nav_back.onclick = () => {
        wrapper.history.back();
        console.log('onclick!');
    };
    div_nav_forward.onclick = () => {
        wrapper.history.forward();
    };
</script>
</body>

When I use mouse to click the div nav-back, the console of chrome output nothing. When I use 'div_nav_back.click()' to trigger the click event, the console output click! onclick! I just want to know what's wrong?

Tags : javascript


Related Questions


How to use SWIG's Javascript support on Windows

Updated September 22, 2017 04:05 AM


Reach <a> tag in iframe

Updated April 04, 2015 15:02 PM


How much should I be using 'let' vs 'const' in ES6?

Updated April 09, 2015 19:02 PM