Answered…Bootstrap 4 Card and Firefox issue with opening links
up vote
0
down vote
favorite
Below is a sample of my Bootstrap card code. I need to make the card open the hyperlink if the user links on the card itself OR they click on the card title. The following code works everywhere but in Firefox. In Firefox, if you click on the card, it works. If you click on the card title, Firefox opens TWO new windows.
Any ideas please? Thanks.
<div class="col-lg-3 col-md-6 mb-4 column checklist">
<div class='card h-100' onclick="window.open('https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf','_blank');">
<div class="card-body">
<h4 class="card-title">
<a href="https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf" target="_blank">Change Checklist Display Order</a>
</h4>
<p class="card-text">This job aid describes how to change the Direct Checklist display order.</p>
</div>
<div class="card-footer">2 pages <img src="images/pdf3.png" align="right" width="17" height="20" alt="Job Aid"/>
</div>
</div>
</div>
twitter-bootstrap firefox
asked Nov 13 at 22:55
Denise W
11
|
show 2 more comments
up vote
0
down vote
favorite
Below is a sample of my Bootstrap card code. I need to make the card open the hyperlink if the user links on the card itself OR they click on the card title. The following code works everywhere but in Firefox. In Firefox, if you click on the card, it works. If you click on the card title, Firefox opens TWO new windows.
Any ideas please? Thanks.
<div class="col-lg-3 col-md-6 mb-4 column checklist">
<div class='card h-100' onclick="window.open('https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf','_blank');">
<div class="card-body">
<h4 class="card-title">
<a href="https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf" target="_blank">Change Checklist Display Order</a>
</h4>
<p class="card-text">This job aid describes how to change the Direct Checklist display order.</p>
</div>
<div class="card-footer">2 pages <img src="images/pdf3.png" align="right" width="17" height="20" alt="Job Aid"/>
</div>
</div>
</div>
twitter-bootstrap firefox
asked Nov 13 at 22:55
Denise W
11
When you're clicking on .card you're clicking on <a> as well because it is a child element. You need to use stopPropagation to fix it. Maybe:<a onclick="event.stopPropagation();" href="...">Change</a>
– Zavarock
Nov 14 at 14:17
If I understand you correctly, your saying the stop would tell the card to ignore the href. BUT its the other way around. The onclick works just fine. Firefox fires BOTH events if you click on the href, opening two windows?
– Denise W
Nov 14 at 14:21
Well, my english is intermediary, but I will try to answer... Although you're using onclick event in .card, <a> is a child element so when you click on .card, you're clicking on it too. Using stopPropagation() will fix your problem.
– Zavarock
Nov 14 at 14:42
You can learn more about stopPropagation here: developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… There are other ways to fix it, of course. You could create a custom event using addEventListener and custom attributes for example.
– Zavarock
Nov 14 at 14:42
Thank you for your replies. Your English is just fine to my eyes. I think I understand. Basically it is telling the onclick to be ignored by the href. I will give it a try
– Denise W
Nov 14 at 14:46
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Below is a sample of my Bootstrap card code. I need to make the card open the hyperlink if the user links on the card itself OR they click on the card title. The following code works everywhere but in Firefox. In Firefox, if you click on the card, it works. If you click on the card title, Firefox opens TWO new windows.
Any ideas please? Thanks.
<div class="col-lg-3 col-md-6 mb-4 column checklist">
<div class='card h-100' onclick="window.open('https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf','_blank');">
<div class="card-body">
<h4 class="card-title">
<a href="https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf" target="_blank">Change Checklist Display Order</a>
</h4>
<p class="card-text">This job aid describes how to change the Direct Checklist display order.</p>
</div>
<div class="card-footer">2 pages <img src="images/pdf3.png" align="right" width="17" height="20" alt="Job Aid"/>
</div>
</div>
</div>
twitter-bootstrap firefox
asked Nov 13 at 22:55
Denise W
11
Below is a sample of my Bootstrap card code. I need to make the card open the hyperlink if the user links on the card itself OR they click on the card title. The following code works everywhere but in Firefox. In Firefox, if you click on the card, it works. If you click on the card title, Firefox opens TWO new windows.
Any ideas please? Thanks.
<div class="col-lg-3 col-md-6 mb-4 column checklist">
<div class='card h-100' onclick="window.open('https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf','_blank');">
<div class="card-body">
<h4 class="card-title">
<a href="https://help.cccis.com/training/repair_facility/estimating/checklists/ChangeChecklistDisplayOrder.pdf" target="_blank">Change Checklist Display Order</a>
</h4>
<p class="card-text">This job aid describes how to change the Direct Checklist display order.</p>
</div>
<div class="card-footer">2 pages <img src="images/pdf3.png" align="right" width="17" height="20" alt="Job Aid"/>
</div>
</div>
</div>
twitter-bootstrap firefox
twitter-bootstrap firefox
asked Nov 13 at 22:55
Denise W
11
asked Nov 13 at 22:55
Denise W
11
edited Nov 14 at 15:48
asked Nov 13 at 22:55
Denise W
11
asked Nov 13 at 22:55
Denise W
11
asked Nov 13 at 22:55
Denise W
11
11
When you're clicking on .card you're clicking on <a> as well because it is a child element. You need to use stopPropagation to fix it. Maybe:<a onclick="event.stopPropagation();" href="...">Change</a>
– Zavarock
Nov 14 at 14:17
If I understand you correctly, your saying the stop would tell the card to ignore the href. BUT its the other way around. The onclick works just fine. Firefox fires BOTH events if you click on the href, opening two windows?
– Denise W
Nov 14 at 14:21
Well, my english is intermediary, but I will try to answer... Although you're using onclick event in .card, <a> is a child element so when you click on .card, you're clicking on it too. Using stopPropagation() will fix your problem.
– Zavarock
Nov 14 at 14:42
You can learn more about stopPropagation here: developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… There are other ways to fix it, of course. You could create a custom event using addEventListener and custom attributes for example.
– Zavarock
Nov 14 at 14:42
Thank you for your replies. Your English is just fine to my eyes. I think I understand. Basically it is telling the onclick to be ignored by the href. I will give it a try
– Denise W
Nov 14 at 14:46
|
show 2 more comments
When you're clicking on .card you're clicking on <a> as well because it is a child element. You need to use stopPropagation to fix it. Maybe:<a onclick="event.stopPropagation();" href="...">Change</a>
– Zavarock
Nov 14 at 14:17
If I understand you correctly, your saying the stop would tell the card to ignore the href. BUT its the other way around. The onclick works just fine. Firefox fires BOTH events if you click on the href, opening two windows?
– Denise W
Nov 14 at 14:21
Well, my english is intermediary, but I will try to answer... Although you're using onclick event in .card, <a> is a child element so when you click on .card, you're clicking on it too. Using stopPropagation() will fix your problem.
– Zavarock
Nov 14 at 14:42
You can learn more about stopPropagation here: developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… There are other ways to fix it, of course. You could create a custom event using addEventListener and custom attributes for example.
– Zavarock
Nov 14 at 14:42
Thank you for your replies. Your English is just fine to my eyes. I think I understand. Basically it is telling the onclick to be ignored by the href. I will give it a try
– Denise W
Nov 14 at 14:46
When you're clicking on .card you're clicking on <a> as well because it is a child element. You need to use stopPropagation to fix it. Maybe:
<a onclick="event.stopPropagation();" href="...">Change</a>– Zavarock
Nov 14 at 14:17
When you're clicking on .card you're clicking on <a> as well because it is a child element. You need to use stopPropagation to fix it. Maybe:
<a onclick="event.stopPropagation();" href="...">Change</a>– Zavarock
Nov 14 at 14:17
If I understand you correctly, your saying the stop would tell the card to ignore the href. BUT its the other way around. The onclick works just fine. Firefox fires BOTH events if you click on the href, opening two windows?
– Denise W
Nov 14 at 14:21
If I understand you correctly, your saying the stop would tell the card to ignore the href. BUT its the other way around. The onclick works just fine. Firefox fires BOTH events if you click on the href, opening two windows?
– Denise W
Nov 14 at 14:21
Well, my english is intermediary, but I will try to answer... Although you're using onclick event in .card, <a> is a child element so when you click on .card, you're clicking on it too. Using stopPropagation() will fix your problem.
– Zavarock
Nov 14 at 14:42
Well, my english is intermediary, but I will try to answer... Although you're using onclick event in .card, <a> is a child element so when you click on .card, you're clicking on it too. Using stopPropagation() will fix your problem.
– Zavarock
Nov 14 at 14:42
You can learn more about stopPropagation here: developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… There are other ways to fix it, of course. You could create a custom event using addEventListener and custom attributes for example.
– Zavarock
Nov 14 at 14:42
You can learn more about stopPropagation here: developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… There are other ways to fix it, of course. You could create a custom event using addEventListener and custom attributes for example.
– Zavarock
Nov 14 at 14:42
Thank you for your replies. Your English is just fine to my eyes. I think I understand. Basically it is telling the onclick to be ignored by the href. I will give it a try
– Denise W
Nov 14 at 14:46
Thank you for your replies. Your English is just fine to my eyes. I think I understand. Basically it is telling the onclick to be ignored by the href. I will give it a try
– Denise W
Nov 14 at 14:46
|
show 2 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290744%2fanswered-bootstrap-4-card-and-firefox-issue-with-opening-links%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
When you're clicking on .card you're clicking on <a> as well because it is a child element. You need to use stopPropagation to fix it. Maybe:
<a onclick="event.stopPropagation();" href="...">Change</a>– Zavarock
Nov 14 at 14:17
If I understand you correctly, your saying the stop would tell the card to ignore the href. BUT its the other way around. The onclick works just fine. Firefox fires BOTH events if you click on the href, opening two windows?
– Denise W
Nov 14 at 14:21
Well, my english is intermediary, but I will try to answer... Although you're using onclick event in .card, <a> is a child element so when you click on .card, you're clicking on it too. Using stopPropagation() will fix your problem.
– Zavarock
Nov 14 at 14:42
You can learn more about stopPropagation here: developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… There are other ways to fix it, of course. You could create a custom event using addEventListener and custom attributes for example.
– Zavarock
Nov 14 at 14:42
Thank you for your replies. Your English is just fine to my eyes. I think I understand. Basically it is telling the onclick to be ignored by the href. I will give it a try
– Denise W
Nov 14 at 14:46