Odd behaviour of middle-click here on the site

General forum information, announcements, news, questions and suggestions.

Moderator: EasyList authors

Post Reply
User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 994
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 18

Odd behaviour of middle-click here on the site

Post by Lain_13 » Thu Feb 26, 2015 5:02 pm

When I clicking on topics and groups of topics here on the site it opens both in the new tab _and_ in the current one after a slight delay.
As I understood it's caused by onclick code attached to the LI elements. This happens due to event bubbling which retranslates all click events of a child to all parents.
I think it's the worst way to make them clickable. I'd recommend replacing LI elements with normal A links and update styles to support change of background color on hover instead of changing text color. All links within a link will remain clickable.

p.s. Even if you don't want to change LI to A and without issue above attaching separate onclick to every element on the page is a horrible idea. You could have achieved this with 1 click handler function subscribed to clicks from all elements on the page.

Example:

Code: Select all

function rowClickHandler(e){
  if (e.which == 2) return; //avoid reaction on the middle-click
  var i = e.target;
  while (i && !i.classList.contains('row')) i = i.parentNode; // classList not supported in old browsers. there are polyfill for this
  if (i) i = i.querySelector('.forumtitle,.topictitle'); //you may need to extend list of classes here
  if (i) window.location.href = i.href;
}

[].forEach.call(document.querySelectorAll('.row'),function(i){
  i.onclick = null; // this row removes current on-click behavior
  i.addEventListener('click', rowClickHandler); //not supported in IE6. there are different function to call, though
});

User avatar
Lanik
Site Owner
Site Owner
Posts: 1334
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 21
Location: /dev/null

Post by Lanik » Thu Feb 26, 2015 5:53 pm

Its probably the clickable rows add-on that's installed. I know near nothing about php code, so even if I wanted to change something I wouldn't know where to begin.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 994
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 18

Post by Lain_13 » Thu Feb 26, 2015 8:57 pm

Here is updated code:

Code: Select all

<script type="text/javascript">
// <![CDATA[
(function(lst){
  var callback = function (e) {
    if (e.which == 2) return false; //avoid reaction on the middle-click
    if (this.querySelector) {
      var i = this.querySelector('.forumtitle,.topictitle');
      if (i) window.location.href = i.href;
    }
  }, i = lst.length;
  while(i--){
    lst[i].onclick = null;
    if(lst[i].addEventListener) lst[i].addEventListener('click', callback, false);
    else lst[i].attachEvent('onclick', callback);
  }
})(document.querySelectorAll('.row'));
// ]]>
</script>
Same code but minified:

Code: Select all

<script type="text/javascript">// <![CDATA[
!function(e){for(var t=function(e){if(2==e.which)return!1;if(this.querySelector){var t=this.querySelector(".forumtitle,.topictitle");t&&(window.location.href=t.href)}},i=e.length;i--;)e[i].onclick=null,e[i].addEventListener?e[i].addEventListener("click",t,!1):e[i].attachEvent("onclick",t)}(document.querySelectorAll(".row"));// ]]>
</script>
You can inject it into the body of the page and disable that plugin. That will fix middle-clicks issue and will do the job in a less ugly way.
That won't help to open forums and topics in a new tab by middle-clicking a row, though. Visitors have to middle-click the actual link for that.
Additionally it will not work in the old browsers (IE<8, Opera<10).

User avatar
Lanik
Site Owner
Site Owner
Posts: 1334
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 21
Location: /dev/null

Post by Lanik » Thu Feb 26, 2015 11:52 pm

Thanks I'll test it out and if it works out I'll roll it out. I've been looking for a way to do clickable rows on a more permanent less ugly way without using that addon.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 994
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 18

Post by Lain_13 » Sun Mar 01, 2015 11:03 am

The better way will be to modify the template of a page to use DIV > A instead of UL > LI structure. But I'll need access to page templates and stylesheets and that could become a problem if you are using some standard template and will try to upgrade it later. Also, it's possible to rewrite that structure from a script but I don't think it's a good idea.

User avatar
Lanik
Site Owner
Site Owner
Posts: 1334
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 21
Location: /dev/null

Post by Lanik » Thu May 14, 2015 5:50 pm

I'm just using standard PHPBB templates. You can download the PHPBB board and look at all their templates.

I was looking at this code and I wouldn't even know which template or php file to put them in. If you tell me where to put it I can definitely play around with it and see if it works.

You can find the latest PHPBB 3.1.4 here: https://www.phpbb.com/files/release/phpBB-3.1.4.zip
And the clickable rows mod for PHPBB 3.0.x here: https://www.phpbb.com/customise/db/mod/ ... opic_rows/

As you probably noticed by now there is no replacement for clickable rows in PHPBB 3.1.x.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 994
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 18

Post by Lain_13 » Sun May 17, 2015 7:30 pm

Try to modify file: phpBB3\styles\prosilver\template\viewforum_body.html
Add my script between rows:

Code: Select all

<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->
at the bottom.

Also, you may want to modify a file: \phpBB3\styles\prosilver\theme\content.css
Find "li.row {" (like 99) and add after it "cursor: pointer; cursor: hand;"
So, it will look like this:

Code: Select all

li.row {
	cursor: pointer; cursor: hand;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
} 
This will modify cursor to a hand pointer same as on normal links.

User avatar
Lanik
Site Owner
Site Owner
Posts: 1334
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 21
Location: /dev/null

Post by Lanik » Tue May 19, 2015 9:06 pm

I've tried it on the prosilver theme and it works. The topic clicks work great but the forum don't. I think I will need to find the forum template and paste the same code there too. Unless you know better then I do.
"If it ain't broke don't fix it."

User avatar
Lain_13
RU AdList Author
RU AdList Author
Posts: 994
Joined: Fri Aug 20, 2010 11:20 am
Reputation: 18

Post by Lain_13 » Thu May 21, 2015 1:28 am

I think it's index_body.html in the same folder as viewforum_body.html.
Should work if you will paste it in the end before this row:

Code: Select all

<!-- INCLUDE overall_footer.html -->
Also, it seems like "lst.onclick = null;" line of code is not necessary anymore.

User avatar
Lanik
Site Owner
Site Owner
Posts: 1334
Joined: Thu Feb 15, 2007 7:44 am
Reputation: 21
Location: /dev/null

Post by Lanik » Wed May 27, 2015 8:59 pm

Thanks for that it works now as well.
"If it ain't broke don't fix it."

User avatar
terrorist96
Postaholic
Postaholic
Posts: 464
Joined: Mon May 11, 2015 2:24 pm
Reputation: 0

Post by terrorist96 » Tue Jun 16, 2015 7:47 pm

I've experienced this before too. It's super annoying!
uBlock Origin extension;
Chrome 64 bit;
Subscription Lists: Default.

Post Reply