homepage Welcome to WebmasterWorld Guest from 54.161.155.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Minimum events to call on a dynamic link
Rain_Lover




msg:4677485
 4:05 pm on Jun 4, 2014 (gmt 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?

 

Fotiman




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

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

Rain_Lover




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

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

I have the same problem.

Rain_Lover




msg:4677619
 4:20 am on Jun 5, 2014 (gmt 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?

penders




msg:4677680
 10:53 am on Jun 5, 2014 (gmt 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.

Fotiman




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

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




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

Thank Fotiman & penders! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved