I am developing a site with the following libraries:
- Parse.js: 1.4.2
- JQuery: 1.11.2 and 1.10.3 (U.I.)
- Twitter Bootstrap: 3.3.4
I have created this JSfiddle with dummy data to explain what I am looking for: /
As of right now, if I click ANYWHERE on the row, the onclick listener fires but does not discriminate hyperlinks. Whenever I click on the email hyperlink in my row, my dialog at the bottom opens and the default mailing program (e.g. outlook) opens at the same time which is annoying. What I want is to say "if onclick captures a hyperlink, don't open dialog. Otherwise if no hyperlink was touched in onclick, open dialog".
I don't know how to discriminate between a general click and one which is pointing at a hyperlink. Any help is really appreciated!
Just in case, the code is:
HTML
<div class="container">
<div class="row">
</div>
<div class="col-xs-6 table-responsive peoplelist" id="peoplelist">
<h3>People within the bowl <small><i>Hint:</i> click on the rows to edit or delete them</small></h3>
<table class="table table-striped table-hover bowlsetting">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
<th>Email</th>
<th>School</th>
</tr>
</thead>
<tbody id="bowsettingsbody">
<tr class="bowsettingperson">
<td> firstName </td>
<td> lastName </td>
<td> role</td>
<td><a href="mailto:[email protected]?Subject=Ethics Bowl:&body=body" target="_top">[email protected]</a></td>
<td> school </td>
</tr>
<tr class="bowsettingperson">
<td> firstName </td>
<td> lastName </td>
<td> role</td>
<td><a href="mailto:[email protected]?Subject=Ethics Bowl:&body=body" target="_top">[email protected]</a></td>
<td> school </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS
// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){
// TODO: figure out a way to single out the email hyperlinks
// set up an array to hold the row's data. Need to clear every time
var bowl_setting_row_data = [];
// locate the current row you're on and push the data into the array.
$('td', $(this).closest('tr')).each(function()
{
bowl_setting_row_data.push($(this).text());
});
// this is another part of the code which does not concern what I'm looking for
//$('#dialog_bowl_setting_initial_dialog').dialog('open');
});
I am developing a site with the following libraries:
- Parse.js: 1.4.2
- JQuery: 1.11.2 and 1.10.3 (U.I.)
- Twitter Bootstrap: 3.3.4
I have created this JSfiddle with dummy data to explain what I am looking for: https://jsfiddle/xuf7wy4x/1/
As of right now, if I click ANYWHERE on the row, the onclick listener fires but does not discriminate hyperlinks. Whenever I click on the email hyperlink in my row, my dialog at the bottom opens and the default mailing program (e.g. outlook) opens at the same time which is annoying. What I want is to say "if onclick captures a hyperlink, don't open dialog. Otherwise if no hyperlink was touched in onclick, open dialog".
I don't know how to discriminate between a general click and one which is pointing at a hyperlink. Any help is really appreciated!
Just in case, the code is:
HTML
<div class="container">
<div class="row">
</div>
<div class="col-xs-6 table-responsive peoplelist" id="peoplelist">
<h3>People within the bowl <small><i>Hint:</i> click on the rows to edit or delete them</small></h3>
<table class="table table-striped table-hover bowlsetting">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
<th>Email</th>
<th>School</th>
</tr>
</thead>
<tbody id="bowsettingsbody">
<tr class="bowsettingperson">
<td> firstName </td>
<td> lastName </td>
<td> role</td>
<td><a href="mailto:[email protected]?Subject=Ethics Bowl:&body=body" target="_top">[email protected]</a></td>
<td> school </td>
</tr>
<tr class="bowsettingperson">
<td> firstName </td>
<td> lastName </td>
<td> role</td>
<td><a href="mailto:[email protected]?Subject=Ethics Bowl:&body=body" target="_top">[email protected]</a></td>
<td> school </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS
// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){
// TODO: figure out a way to single out the email hyperlinks
// set up an array to hold the row's data. Need to clear every time
var bowl_setting_row_data = [];
// locate the current row you're on and push the data into the array.
$('td', $(this).closest('tr')).each(function()
{
bowl_setting_row_data.push($(this).text());
});
// this is another part of the code which does not concern what I'm looking for
//$('#dialog_bowl_setting_initial_dialog').dialog('open');
});
3 Answers
Reset to default 5Make use of event.target and check its tagName
// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){
if(e.target.tagName == 'A'){
return;
}
// set up an array to hold the row's data. Need to clear every time
var bowl_setting_row_data = [];
// locate the current row you're on and push the data into the array.
$('td', $(this).closest('tr')).each(function()
{
bowl_setting_row_data.push($(this).text());
});
// this is another part of the code which does not concern what I'm looking for
//$('#dialog_bowl_setting_initial_dialog').dialog('open');
});
Catch the event on the hyperlink and stop it from bubbling.
$("#peoplelist tbody").on("click", "tr a", function (e) {
e.stopPropagation();
});
You can also check directly to see if there is an href present.
Updated Fiddle
// row on-click listener
$("#peoplelist tbody").on("click", "tr", function(e){
if (e.target.href){
return;
}
// TODO: figure out a way to single out the email hyperlinks
// set up an array to hold the row's data. Need to clear every time
var bowl_setting_row_data = [];
// locate the current row you're on and push the data into the array.
$('td', $(this).closest('tr')).each(function()
{
bowl_setting_row_data.push($(this).text());
});
// this is another part of the code which does not concern what I'm looking for
//$('#dialog_bowl_setting_initial_dialog').dialog('open');
});