473,382 Members | 1,329 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > automated click event not executing href for hyperlinks

Join Bytes to post your question to a community of 473,382 software developers and data experts.

Automated Click Event not executing href for hyperlinks

Frinavale
9,735 Expert Mod 8TB
This has to be one of the most frustrating controls I've ever designed.

First I couldn't stop the __doPostback method from executing for DropDownLists (ie select elements).

Now the __doPostback method will not execute for LinkButtons (hyperlinks that call the __doPostback method as their href) when I reissue the mouse click event.


The same technique I used to stop and then re-issue the __doPostback for a DropDownList wont work for the issue with LinkButtons....

I figured I'd mention it now before I went down some crazy path again that leads me to nowhere.

(This thread is split off of this thread)
Apr 16 '09 #1
9 4708
iam_clint
1,208 Expert 1GB
Well don't use an asplinkbutton then use a regular link and append event to it.
Apr 16 '09 #2
Frinavale
9,735 Expert Mod 8TB
@iam_clint
Hmm you would think that would work except for some reason regular hyperlinks are experiencing the same thing...except that instead of a JavaScript function not being called, the hyperlink simply doesn't link the user to the URL the href.

It's almost as if the dispatchEvent() method isn't dispatching the event.

I tried removing all code that "resets" the original event to make sure that this wasn't messing up the new event being dispatched, but this didn't make a difference.
Apr 16 '09 #3
Frinavale
9,735 Expert Mod 8TB
Hmm...

It's not working in this simple example either.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script type="text/JavaScript">
  5. function automatedClick()
  6. {
  7.   var link = document.getElementById('sayHiLink');
  8.   alert(link);
  9.   var clickEvent = document.createEvent('MouseEvents');
  10.   clickEvent.initEvent('click', true, true, document.defaultView,
  11.                          1, 0, 0, 0, 0, false, false, 
  12.                          true, false, 0, null);
  13.   var done = link.dispatchEvent(clickEvent);
  14.   alert(done);
  15.  
  16.  
  17. }
  18. function sayHi(){
  19.   alert("hi!");
  20. }
  21. </script>
  22.  
  23. </head>
  24. <body onload="automatedClick();">
  25.  
  26.  
  27. <a href="javascript:sayHi();" id="sayHiLink">hi</a>
  28.  
  29.  
  30.  
  31. </body>
  32. </html>
Apr 16 '09 #4
Frinavale
9,735 Expert Mod 8TB
I've been doing a lot of reading about events.

Some events can be cancelled. For these events a default action is associated with the event.

For hyperlinks, the default action is to activate the hyperlink. Before this default action happens the DOM implementation checks for event listeners registered to receive the event. Those event listeners have the option to cancel or allow the default action to take place.


Now, what's interesting is that I am not cancelling the default action of the hyperlink at all. I'm actually issuing an event that I thought should activate the default action but apparently this is not the case.

(I've only been testing in FireFox so this might be different for other browsers, depending on their DOM implementation).

Anyways, I started trying out a few things. I discovered that if I apply an event listener to the hyperlink that this event listener is executed during the dispatched mouse event; however, the default action (the href) is not executed.

Here's the code that I've been playing with:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.   <script type="text/JavaScript">
  5.     function automatedClick(e)
  6.     {
  7.       var myEvt = document.createEvent('MouseEvents');
  8.  
  9.       myEvt.initMouseEvent(
  10.      'click'         // event type
  11.      ,true           // indicates whether or not the event bubbles
  12.      ,true           // indicates whether or not the event can be cancelled
  13.      ,window         // the event's abstract view (should always be window)
  14.      ,1              // mouse click count (or event "detail")
  15.      ,0              // event's screen x coordinate
  16.      ,0              // event's screen y coordinate
  17.      ,0              // event's client x coordinate
  18.      ,0              // event's client y coordinate
  19.      ,false          // whether or not CTRL was pressed during event
  20.      ,false          // whether or not ALT was pressed during event
  21.      ,false          // whether or not SHIFT was pressed during event
  22.      ,false          // whether or not the meta key was pressed during event
  23.      ,1              // indicates which button (if any) caused the mouse event (1 = primary button)
  24.      ,null          // relatedTarget (only applicable for mouseover/mouseout events)
  25.     ); 
  26.  
  27.       var link = document.getElementById('sayHiLink');
  28.       var done = document.getElementById('sayHiLink').dispatchEvent(myEvt);
  29.       if(done){
  30.         alert("The event dispatched successfully.");
  31.       }else{
  32.         alert("There was a problem dispatching event.");
  33.       }
  34.     }
  35.     function sayHi(){
  36.       alert("Default action: hi!");
  37.     }
  38.     function anotherHi(){
  39.       alert("EventListener: another hi...");
  40.     }
  41. </script>
  42.  
  43. </head>
  44. <body>
  45.  
  46.   <input type="button" id="sayHiButton" value="click me" />
  47.   <br />
  48.   <a href="javascript:sayHi();" id="sayHiLink">hi</a>
  49.  
  50.   <script>
  51.     var btn= document.getElementById('sayHiButton');
  52.     btn.addEventListener('click', automatedClick, false); 
  53.  
  54.     var lnk= document.getElementById('sayHiLink');
  55.     sayHiLink.addEventListener('click', anotherHi, false); 
  56.   </script>
  57.  
  58. </body>
  59. </html>
Just to make sure that this wasn't only true for when the default action of the hyperlink is to execute a JavaScript function, I modified the code so that the default action of the hyperlink was to load http://www.google.com. The same thing happens: the event listener is executed...but the hyperlink's default action (to load google) did not execute.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.   <script type="text/JavaScript">
  5.     function automatedClick(e)
  6.     {
  7.       var myEvt = document.createEvent('MouseEvents');
  8.  
  9.       myEvt.initMouseEvent(
  10.      'click'         // event type
  11.      ,true           // indicates whether or not the event bubbles
  12.      ,true           // indicates whether or not the event can be cancelled
  13.      ,window         // the event's abstract view (should always be window)
  14.      ,1              // mouse click count (or event "detail")
  15.      ,0              // event's screen x coordinate
  16.      ,0              // event's screen y coordinate
  17.      ,0              // event's client x coordinate
  18.      ,0              // event's client y coordinate
  19.      ,false          // whether or not CTRL was pressed during event
  20.      ,false          // whether or not ALT was pressed during event
  21.      ,false          // whether or not SHIFT was pressed during event
  22.      ,false          // whether or not the meta key was pressed during event
  23.      ,1              // indicates which button (if any) caused the mouse event (1 = primary button)
  24.      ,null          // relatedTarget (only applicable for mouseover/mouseout events)
  25.     ); 
  26.  
  27.       var link = document.getElementById('theLink');
  28.       var done = document.getElementById('theLink').dispatchEvent(myEvt);
  29.       if(done){
  30.         alert("The event dispatched successfully.");
  31.       }else{
  32.         alert("There was a problem dispatching event.");
  33.       }
  34.     }
  35.     function linkClickEventHandler(){
  36.       alert("Click Event Handled by EventListener.");
  37.     }
  38. </script>
  39.  
  40. </head>
  41. <body>
  42.  
  43.   <input type="button" id="sayHiButton" value="click me" />
  44.   <br />
  45.   <a href="http://www.google.com" id="theLink">Google</a>
  46.  
  47.   <script>
  48.     var btn= document.getElementById('sayHiButton');
  49.     btn.addEventListener('click', automatedClick, false); 
  50.  
  51.     var lnk= document.getElementById('theLink');
  52.     lnk.addEventListener('click', linkClickEventHandler, false); 
  53.   </script>
  54.  
  55. </body>
  56. </htm>
I'm going to keep investigating this mystery....so any input about what's going on would really help.

Thanks

-Frinny
Apr 17 '09 #5
Frinavale
9,735 Expert Mod 8TB
I am starting to think that firing a hyperlink's default action is impossible by dispatching a JavaScript mouse click event.

I am guessing that this is a security feature to prevent cross site scripting attacks from redirecting users to pages without their knowledge.

I'm not certain why I cannot do this, but I'm abandoning the issue....chalking it up to be one of those things that you simply cannot do.

-Frinny
Apr 17 '09 #6
Frinavale
9,735 Expert Mod 8TB
I never solve the mystery but I solved my problem.

I checked if there was a value in the href of the link element, then to execute the event I either called the JavaScript value provided for the href property or I preformed a JavaScript redirect to the value provided as the href property.

It feels like a hack but it's working.
Here's an example:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.   <script type="text/JavaScript">
  5.     function automatedClick(e)
  6.     {
  7.       var myEvt = document.createEvent('MouseEvents');
  8.       var link;
  9.       link = document.getElementById('theLink2');
  10.       //the following tests the redirect case.
  11.       //link = document.getElementById('theLink');
  12.       myEvt.initMouseEvent('click', false, false, window, 1, 0, 0, 0, 0, false, false, false, false ,1 ,null);   
  13.       link.dispatchEvent(myEvt);
  14.       if(link.href != null && link.href != ''){
  15.         if(link.href.search("JavaScript")>0){
  16.           //call JavaScript Function
  17.         }else{
  18.           //redirect 
  19.           window.location = link.href;
  20.         }
  21.       }
  22.     }
  23.     function linkClickEventHandler(){
  24.       alert("Click Event Handled by EventListener.");
  25.     }
  26.     function sayHi(){
  27.        alert("Hi!");
  28.     }
  29. </script>
  30.  
  31. </head>
  32. <body>
  33.  
  34.   <input type="button" id="sayHiButton" value="click me" />
  35.   <br />
  36.   <a href="http://www.google.com" id="theLink">Google</a>
  37.   <br />
  38.   <a href="javascript:sayHi();" id="theLink2">JavaScript</a>
  39.  
  40.   <script>
  41.     var btn= document.getElementById('sayHiButton');
  42.     btn.addEventListener('click', automatedClick, false); 
  43.  
  44.     var lnk= document.getElementById('theLink');
  45.     lnk.addEventListener('click', linkClickEventHandler, false); 
  46.   </script>
  47.  
  48. </body>
  49. </htm>
-Frinny
Apr 17 '09 #7
iam_clint
1,208 Expert 1GB
Some browsers will allow an automated click on a link..
such as IE you can use the element.click()
Firefox i don't think you can..

Way around it is read the href attribute and do window.location=href
Apr 17 '09 #8
Frinavale
9,735 Expert Mod 8TB
Thanks iam_clint!

That's precisely what I'm doing in my above posted code snippet.

I have a feeling that once I get this working for FireFox it's not going to work in IE....I think the events are going to be issued more than once....but I'll cross that bridge when I get to it.
Apr 17 '09 #9
Frinavale
9,735 Expert Mod 8TB
I figured I'd share the solution that works in IE as well as other browsers:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4.   <script type="text/JavaScript">
  5.     function automatedClick(e)
  6.     {    
  7.       var link;
  8.       link = document.getElementById('theLink2');
  9.  
  10.       //the following tests the redirect case.
  11.       //link = document.getElementById('theLink');
  12.  
  13.       try{
  14.         var myEvt = document.createEvent('MouseEvents');
  15.         myEvt.initMouseEvent('click', false, false, window, 1, 0, 0, 0, 0, false, false, false, false ,1 ,null);   
  16.         link.dispatchEvent(myEvt);
  17.       }catch(ex){
  18.          myEvt= document.createEventObject();
  19.                 myEvt.detail = 0;
  20.                 myEvt.screenX = 0;
  21.                 myEvt.screenY = 0;
  22.                 myEvt.clientX = 0;
  23.                 myEvt.clientY = 0;
  24.                 myEvt.ctrlKey = false;
  25.                 myEvt.altKey = false;
  26.                 myEvt.shiftKey = true;
  27.                 myEvt.metaKey = false;
  28.                 myEvt.button = 1;
  29.                 myEvt.relatedTarget = null;
  30.          link.fireEvent('onclick', myEvt);
  31.       }
  32.       if(link.href != null && link.href != ''){
  33.         if(link.href.search("JavaScript")>0){
  34.           //call JavaScript Function
  35.           eval(link.href);
  36.         }else{
  37.           //redirect 
  38.           window.location = link.href;
  39.         }
  40.       }
  41.     }
  42.     function linkClickEventHandler(){
  43.       alert("Click Event Handled by EventListener.");
  44.     }
  45.     function sayHi(){
  46.        alert("Hi!");
  47.     }
  48. </script>
  49.  
  50. </head>
  51. <body>
  52.  
  53.   <input type="button" id="sayHiButton" value="click me" />
  54.   <br />
  55.   <a href="http://www.google.com" id="theLink">Google</a>
  56.   <br />
  57.   <a href="javascript:sayHi();" id="theLink2">JavaScript</a>
  58.  
  59.   <script>
  60.     var btn= document.getElementById('sayHiButton');  
  61.     var lnk= document.getElementById('theLink');
  62.     var lnk2= document.getElementById('theLink2');
  63.  
  64.     try{
  65.           btn.addEventListener('click', automatedClick, false); 
  66.           lnk.addEventListener('click', linkClickEventHandler, false); 
  67.           lnk2.addEventListener('click', linkClickEventHandler, false);
  68.     }
  69.     catch(ex) {
  70.         btn.attachEvent('onclick', automatedClick); 
  71.         lnk.attachEvent('onclick', linkClickEventHandler); 
  72.         lnk2.attachEvent('onclick', linkClickEventHandler);
  73.     }
  74.  
  75.   </script>
  76.  
  77. </body>
  78. </htm>
Apr 21 '09 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

4
disable all href/links when user click a link
by: KS | last post by:
Im trying to prevent the user from clicking any other links on my page when the user have selected/clicked a href once. Sometimes it takes a while before the next page loads so some user will try...
Javascript
21
invoke link click event in Navigator
by: news.btinternnet.com | last post by:
I can do this in IE myLink.click(); //Invoking the handler as if the user had clicked on the link themselves. I need to be able to do the same in Netscape Navigator, can anyone help ?
Javascript
1
Fire VB sub on Server from Area Click
by: Michael SL | last post by:
I have an area setup <map name="linkmap"><area shape=RECT coords="0,0,135,15" href='<%=LinkDestination1 %>' ><area shape=RECT coords=150,0,285,15 href="<%=LinkDestination2 %>" ><area shape=RECT...
ASP.NET
6
How to Ignore a Asp:Button or asp:linkbutton click
by: RSB | last post by:
Hi I am executing a JavaScript Function for a Button and doing some custom data validation. Now i want to Ignore the Button Click if the Data validation Fails. i am using return(false) in the...
ASP.NET
4
Execute Javascript AFTER click event
by: Ian Kelly | last post by:
Hi All, I have an .net form that is split into two frames. The left frame has a tree that displays a list of all the customers. The right frame displays the appropriate clients information. ...
ASP.NET
6
Public click event for a hyperlink
by: mramsay | last post by:
Hi, I am lost when it comes to creating a click event in asp. I have hyperlinks that are pulled dynamically from a table. An example is Hockey is a hyperlink. What I want to do is when a...
ASP / Active Server Pages
1
No Page_Load event when loading .aspx page into iframe
by: epower | last post by:
Hello, I am working on an ASP .NET application in Visual Studio 2005 and running IE7. This application has a page that contains an iframe which loads an .aspx page and hyperlinks that...
.NET Framework
2
'this' and <A HREF="...">
by: Peter Laman | last post by:
In my app I need to dynamically generate a series hyperlinks. Each hyperlink's action must be to focus a field in a <form>. I created the following function to create such a link (the argument is a...
Javascript
5
Problem with simulating a link.click
by: Xu, Qian | last post by:
Hello All, I have some problem by simulating a link click using javascript. The webpage uses a js-library named interface (jQuery like) ------------------------------ <a id="foo" href="#">Try...
Javascript
0
Wordpress or something else?
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
Content Management Systems
0
isladogs
Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
General
0
One-click Importing Excel Data into a*Database
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
Microsoft Excel
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!