Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui"/>
    <title>JS Bin</title>
​
    <style>
        button:active {
          background: green;
        }  
        
        button:hover {
            background: gray;
        }
    </style>
​
</head>
<body>
    <button type="button">1. Click me first!</button>
​
    <button type="button" id="hideme">2. Then click me!</button>
  
    <p>Button 1 gets the hover state once the button two disappears. Why?</p>
  
    <script>
    document.addEventListener("touchend", function  (event) {
        var touchend = event.changedTouches[0];
​
        var el = event.target;
        var clickEvent = document.createEvent("MouseEvents");
​
        clickEvent.initMouseEvent("click", true, true, window, 1, touchend.screenX, touchend.screenY, touchend.clientX, touchend.clientY, false, false, false, false, 0, null);
        clickEvent.isSyn = true;
        el.dispatchEvent(clickEvent);
​
        return false;
    }, false);
​
​
    var hideme = document.getElementById('hideme');
​
    hideme.addEventListener('click', function () {
        hideme.parentNode.removeChild(hideme);
    });
</script>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers