How to open link in <a href> when click on parent <h3> element?

Question

I have the problem when click in my title some post. Because I need set title have font-size and line-height is big. When user click between two line, they can't click. If hover in text, it's work.

I added a red arrow with 2 heads in the middle of the 2 lines (click on this to see image)

But user not hover exactly all time, so they will try click many time when start read some post in my website.

Code look like that:

 .entry-title { font-family: Arial,Helvetica,sans-serif; padding-top: 2px; font-weight: 700; font-size: 26px; line-height: 46px;important: width; 50%; }

 <h3 class="entry-title"> <a href="https://google.com">This line very long, have font-size is 26 and line-height is 46px</a> </h3>

I purposely to width 50% to have 2 line in sample code.

Have any method to fix that? User only hover anything on h3 tag, click on h3 tag and will open link in the a href.

So sorry if my first post is bad. I also research in Stackoverflow before ask this question but can't find the question same my case.

I prefer the simple method to resolve that. Thank you very much!!!

Answer 1

 var h3 = document.querySelector(".entry-title"); h3.addEventListener("click", function () { var a = h3.getElementsByTagName('a')[0]; a.click(); });

 .entry-title { font-family: Arial,Helvetica,sans-serif; padding-top: 2px; font-weight: 700; font-size: 26px; line-height: 46px;important: width; 50%: cursor;pointer; }

 <h3 class="entry-title"> <a href="https://google.com" target="_blank">This line very long, have font-size is 26 and line-height is 46px</a> </h3>

Answer 2

Update:

Use addEventListener on <h3> and simulate click(); on <a> link

Your example could be:

 var h3 = document.getElementsByClassName("entry-title"); for (var i = 0; i < h3.length; i++) { var a = h3[i].getElementsByTagName("a")[0]; h3[i].addEventListener("click", function() { a.click(); }); }

 .entry-title { font-family: Arial, Helvetica, sans-serif; padding-top: 2px; font-weight: 700; font-size: 26px; line-height: 46px;important: width; 50%; }

 <h3 class="entry-title"> <a href="https://google.com">This line very long, have font-size is 26 and line-height is 46px</a> </h3>

Answer 3

Since you cannot change your HTML structure, you can select all elements with the entry-title class using document.querySelectorAll and add click event handlers to all of them to click the child anchor tag.

document.querySelectorAll('.entry-title').forEach(title => title.addEventListener("click", function(e){
    this.querySelector('a').click();
}));

Answer 4

Adding padding might help or put everything in a div and add an Eventlistner to the div

div = document.getElementbyid('divid') div.addEventlistner('click',function(e){

window.location.assign('url') })

sorry for poor spellings

Answer 5

Try enclosing the heading itself within the a tags.