Welcome to WebmasterWorld Guest from 54.226.147.190

Forum Moderators: open

Message Too Old, No Replies

Minimum events to call on a dynamic link

     

Rain_Lover

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

5+ Year Member Top Contributors Of The Month



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?

Fotiman

6:15 pm on Jun 4, 2014 (gmt 0)

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



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

Rain_Lover

2:37 am on Jun 5, 2014 (gmt 0)

5+ Year Member Top Contributors Of The Month



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

I have the same problem.

Rain_Lover

4:20 am on Jun 5, 2014 (gmt 0)

5+ Year Member Top Contributors Of The Month



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?

penders

10:53 am on Jun 5, 2014 (gmt 0)

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



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.

Fotiman

1:43 pm on Jun 5, 2014 (gmt 0)

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



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.

Rain_Lover

2:28 am on Jun 6, 2014 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thank Fotiman & penders! :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month