MikeMcClatchie MikeMcClatchie - 6 months ago 9
HTML Question

Activate link before mouse button is released

I'm trying to activate a link when the mouse button is pressed down but before it is released.

example code http://codepen.io/MHUMPHRI/pen/GqJGre?editors=1010re?editors=1010

In my example code the content in the RHS tabs is displayed when the LHS link is selected and the mouse button is released. I'd like the tab content to be displayed as soon as the mouse button is pressed down. Grateful for any help. Mike

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<div class="container-fluid">
<div class="row">
<div class="nopadding col-xs-4">
<a class="active" data-toggle="pill" href="#content1">
<div class="blue-box col-xs-12">
<h1>box1<h1>
</div>
</a>
<a data-toggle="pill" href="#content2">
<div class="blue-box col-xs-12">
<h1>box2<h1>
</div>
</a>
<a data-toggle="pill" href="#content3">
<div class="blue-box col-xs-12">
<h1>box3<h1>
</div>
</a>
</div>
<div class="nopadding col-xs-8">
<div class="tab-content">
<div id="content1" class="tab-pane fade in active">
<div class="col-xs-12 grey-box">

<h1>output1<h1>
</div>
</div>
<div id="content2" class="tab-pane fade">
<div class="col-xs-12 grey-box">
<h1>output2<h1>
</div>
</div>
<div id="content3" class="tab-pane fade">
<div class="col-xs-12 grey-box">
<h1>output3<h1>
</div>
</div>
</div>
</div>

Answer

since you imported jQuery, here's a jQuery solution:

first, start off your jQuery with $(document).ready(function() { ... });

then add code:

var pills = $('a[data-toggle="pill"]');
pills.mousedown(function() {
  this.click();
});

this way, whenever you click-and-hold (.mousedown)
you will call an entire .click event on the same element.