JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<h1>
    <code>:hover</code> in iOS.
</h1>
<div id="output"></div>
<div id="box-1" class="box">
    <p>
        This element has event listeners attached to it.
    </p>
    <p>
        If an element has 1 or more DOM event listeners 
        attached to it <code>:hover</code> is applied to 
        the element, in iOS, when <em>any</em> of the events 
        being listened for are fired.
    </p>
    <p>
        n.b. This sample uses 
        <a href="http://vanilla-js.com/">Vanilla JS</a>,
        there is also 
        <a href="http://jsfiddle.net/wrumsby/sfasU/show/">an example</a>
        that uses jQuery.
    </p>
</div>
<div id="box-2" class="box">
    <p>
        This box does <em>not</em> have event listeners attached to it.
    </p>
    <p>
        Having no event listeners doesn't trigger
        <code>:hover</code> in iOS.
    </p>
</div>

CSS

body {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: #333;
}

#output {
    position: absolute;
    left: 340px;
}

.box {
    margin: 4px;
    padding: 8px;
    height: 300px;
    width: 300px;
    background-color: #f00;
    color: #000;
    font-size: 12px;
}

.box p {
    margin-bottom: 1em;
}

.box a {
    color: #000;
}

.box:hover {
    background-color: blue;
    color: #fff;
}

.box:focus {
    background-color: #f00;
    color: #000;
}

.box:hover a {
    color: #fff;
}

.timestamp {
    font-size: 10px;
}

JavaScript

(function() {
    'use strict';

    function fire(type, el) {
        var event = document.createEvent('HTMLEvents');
        
        event.initEvent(type, true, true); // event type ,bubbling, cancelable
        
        return !el.dispatchEvent(event);
    }

    function log(e) {
        var output = document.getElementById('output'),
            html = output.innerHTML,
            type = e.type,
            msg = type;

        html += msg + ' <span class="timestamp">' + (new Date()) + '</span><br>';

        output.innerHTML = html;

        e.preventDefault();    
        
        if (type === 'touchend') {
            // fire mouse leave
            fire('mouseout', e.target);
        }
    }

    var box = document.getElementById('box-1');

    if (Modernizr.touch) {
        box.addEventListener('touchstart', log, false);
        box.addEventListener('touchend', log, false);
    } else {
        box.addEventListener('click', log, false);
    }
    
    box.addEventListener('mouseout', log, false);
}());