js controls experiment

http://vovanr.com/posts/a-href-sharp-problem/

by Vladimir Rodkin

HTML

Что можно проверить:
<ul>
	<li>Навигация клавишей <kbd>Tab</kbd></li>
	<li>Срабатывание события <code>click</code> при нажатии <kbd>Enter</kbd></li>
</ul>

<a class="js-a-href-sharp" href="#">a(href="#")</a>
<a class="js-a-href-sharp" href="#">a(href="#")</a>
<a class="js-a-href-sharp" href="#">a(href="#")</a>
<br>
<a class="js-a-href-javascript" href="javascript:void(0)">a(href="javascript:void(0)")</a>
<a class="js-a-href-javascript" href="javascript:void(0)">a(href="javascript:void(0)")</a>
<a class="js-a-href-javascript" href="javascript:void(0)">a(href="javascript:void(0)")</a>
<br>
<a class="js-a-href" href="">a(href="")</a>
<a class="js-a-href" href="">a(href="")</a>
<a class="js-a-href" href="">a(href="")</a>
<br>
<a class="js-a-href" href>a(href)</a>
<a class="js-a-href" href>a(href)</a>
<a class="js-a-href" href>a(href)</a>
<br>
<a class="js-a">a</a>
<a class="js-a">a</a>
<a class="js-a">a</a>
<br>
<span class="js-span">span</span>
<span class="js-span">span</span>
<span class="js-span">span</span>
<br>
<span class="js-span" tabindex="0">span(tabindex="0")</span>
<span class="js-span" tabindex="0">span(tabindex="0")</span>
<span class="js-span" tabindex="0">span(tabindex="0")</span>
<br>
<button class="js-button" type="button">button(type="button")</button>
<button class="js-button" type="button">button(type="button")</button>
<button class="js-button" type="button">button(type="button")</button>

<br>
<textarea id="log" cols="30" rows="10" style="width: 100%;"></textarea>

JavaScript

window.console = {
    log: function (message) {
        var $log = $('#log');
        $log.text($log.text() + '\n' + message);
    },
};

$('.js-a-href-sharp').on('click', function (e) {
	console.log('click ' + $(this).text());

	e.preventDefault();
});

$('.js-a-href-javascript').on('click', function (e) {
	console.log('click ' + $(this).text());
});

$('.js-a-href').on('click', function (e) {
	console.log('click ' + $(this).text());

	e.preventDefault();
});

$('.js-a').on('click', function (e) {
	console.log('click ' + $(this).text());
});

$('.js-span').on('click', function (e) {
	console.log('click ' + $(this).text());
});

$('.js-button').on('click', function (e) {
	console.log('click ' + $(this).text());
});