Welcome to WebmasterWorld Guest from 54.162.107.231

Forum Moderators: open

Message Too Old, No Replies

Minimum events to call on a dynamic link

     
4:05 pm on Jun 4, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


Sample:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Dynamic Link</title>
</head>

<body>
<input type="text" value="http://www.example.com/" id="input">
<a href="http://www.example.com/" id="link">Linked text</a>
<script>
var link = document.getElementById('link'),
input = document.getElementById('input');
link.onclick = link.oncontextmenu = link.onmousedown = function () {
this.href = input.value;
};
</script>
</body>

</html>


DEMO [jsfiddle.net]
  • onclick
    : called on the left click and keyboard focus +
    Enter

  • oncontextmenu
    : called on the right click and keyboard context menu
  • onmousedown
    : called on the middle click in Firefox and on the link drag to the address bar

Questions:
  1. Are there any other ways to navigate to the URL of the link -- something I forgot to cover for perfect accessibility?
  2. Can I reduce the number of events or do I have to use them all?
6:15 pm on June 4, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4987
votes: 12


How about Touch events? I don't have much experience with Touch events myself.
2:37 am on June 5, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


I don't have much experience with Touch events myself.

I have the same problem.
4:20 am on June 5, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


Actually it refers to my previous thread [webmasterworld.com]. Since it has a different question I thought I'd better keep them separate and open a new thread. As you see in the demo [jsfiddle.net] it's a text editor based on whose content the link needs to be updated.

To be in the safe side I just decided to use
input.onchange
instead of all other events:

input.onchange = function () {
link.href = this.value;
};


It has a downside, though: we call a function when it's not necessarily needed. What if the user leaves the input element to do something else (e.g. click on a button) and doesn't want to click on the link?
10:53 am on June 5, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


It has a downside, though: we call a function when it's not necessarily needed. What if the user leaves the input element to do something else (e.g. click on a button) and doesn't want to click on the link?


I don't really see that as a problem - particularly in this case. Since it is a very small action and would appear to leave the page in the correct state.

By assigning to multiple event handlers, you are potentially doing a lot more work I think.
1:43 pm on June 5, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4987
votes: 12


I agree with penders. The onchange event only happens once, and the work it does is minuscule. If they don't click on the link as a result, no harm has been done.
2:28 am on June 6, 2014 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:Mar 1, 2010
posts: 194
votes: 0


Thank Fotiman & penders! :)