Can I detect a leftclick from mouse? Or Ctrl+Right Click? - javascript

I'm trying to detect if a user pressed the left mouse button or right button + ctrl key, but I'm not sure how to do this.
I know do just detect a click, I could use
<li onClick=\"dosomething()\">
Is there a function to do
<li onLeftClick=\"dosomething()\"> ?

With jQuery one could do something like
$(document).click(function(e) {
if (e.button == 0) {
// was the left button
alert('clicked');
}
});
And with normal javascript there should be some kind of event variable accessible in an onClick function
Perhaps this'll also help yet I don't know if its still accurate
http://www.javascripter.net/faq/leftvsri.htm

You can check the button property of the event.
What you are definitely not going to like is that different browsers return different values: check out the documentation for Firefox and IE. So you will also need to do a browser detect of some sort.

You're looking on the wrong side of things. PHP is server-side, meaning it runs on the servers as opposed to the people visiting your site. When someone visits your site, the visitor (a client) sends the server computer a request for a page. The server receives that request and sends the client the information. When a client clicks his/her mouse, though, nothing is (by default) sent to the server.
The solution depends on what you need to do. If you need PHP scripts to run when you click something, look into sending asynchronous requests through AJAX. You can put your AJAX calls into the dosomething() function. http://www.ibm.com/developerworks/web/library/wa-ajaxintro1.html is a good place to start. If you're familiar with jQuery, though, it's a very simple function call: http://api.jquery.com/jQuery.ajax/

Related

Listen to event in another window

I created a window using var openedWindow = window.open(...).
I have a function which should listen to click event for a button in the new window, but it never fires.
Whenever I click btSearch button it should open another window and listen for #submitButton click event.
btSearch.Attributes["onclick"] = $#"
var openedWindow = window.open(myUrl, "", "toolbar=no,menubar=no,personalbar=no,width=650,height=399,scrollbars=yes,resizable=yes");
window.onModalExit(openedWindow);";
Function is aspx file
function onModalExit(modalWindow) {
$('#submitButton', modalWindow.document).ready(function () {
modalWindow.document.getElementById('submitButton').addEventListener('click', function () {
console.log('RETURNED CORRECTLY');
alert('Now');
});
});
}
you can send data from opened window to opener window via window.opener.postMessage() function.
Every window in a broswer is "isolated", that is there is no way for you to programaticly effect an other window.
That can be done only by the browser who is managing all those tabs. Or maybe by an installed extension for a browser, i suspect those have the power to inject stuff in the running pages probably
EDIT:
Now since that can not be done directly in any way that i know of, you could maybe:
Create a polling mechanism on the tab you want to read the value from
Store the value in some kind of server ( database, in-memory of a back-end etc )
Find a way to associate some kind of ids so you know what to look for.
So you will be transfering the value by taking a long way around PageA -> BackEnd -> PageB.
I am pretty condifent in saying that you can not effect/read from an other tab just by a plain page. You need something of higher layer, like the browser itself, or an extension that has the ability to inject/inspect pages, after a user has agreed to give permissions by installing the extension.
The only solution I see to solve your requirement, would be to use Sockets
But for this, you obviously need some kind of backend.

Will dataLayer.push() definitely send data to google when triggered on an anchor?

This may seem like a simple question, but it doesn't seem to be answered anywhere that i can find.
I am writing an onClick event handler that simply calls dataLayer.push() when an anchor is clicked.
Is dataLayer.push() a synchronous operation?
Will the GET request to google definitely be sent, even though the browser has unloaded the page it was requested from due to the link being followed?
Some browsers show the connection get cancelled, some show it success.
My question is if the computer is slow, is it possible for the page to get unloaded before the request is sent?
This is why i assume that google started using the eventCallback property to redirect the user after the link has been followed.
e.g.
https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks
This source code does not include the click handler, but implies that the onClick event should stop propogation and let the eventCallback function set document.location.
However, as soon as you cancel the event, all its information has gone.
This (in my opinion) is just the wrong way to do it.
e.g.
(CTRL or COMMAND) + Click opens a new tab on browsers. This will not work unless the onClick event handler allows the prorogation to continue.
Relying on eventCallback also means that if the google scrips didn't load for one of the many reasons it could (but is still unlikely), your links don't work. And your site is broken.
So this leaves the correct way to do it for the onClick event handler to allow the event to propagate and return true.
Which also means that dataLayer.push() would need return after the GET request was sent for any of this to work properly.
Code example:
NOTE: You will get mixed results in mixed environments.
Link
$(document).on('click', 'a', function(event) {
// Is dataLayer.push() guaranteed to fire a GET ?
// data set externally
dataLayer.push(data);
return true;
});
Is there anyone out there that can guarantee that the GET request will get fired to the google server?
Have the google developers forgotten something here?
EDIT: Updated title to be more relevant to the question.
datalayer.push does not send anything to Google. It pushes objects with key/value pairs to the datalayer array. This might contain an event which in turn fires a tag. Whether the tag is sent depends on the setup of the tag, not on the dataLayer.push.
As a consequence, when you write your own click handlers your are yourself responsible to make sure your tags are actually fired.
If you use the built-in click handler you can configure a delay to make sure your tag has time to fire before the link redirects:
Since link clicks usually cause the browser to load a new page and
interrupt any pending HTTP request, you have the option to add a small
delay to allow tags fired by Tag Manager to execute properly before
redirecting to the next page. Checking the “Wait For Tags” option will
delay opening of links until all tags have fired or the specified
timeout has elapsed, whichever comes first.
You should be able to mix both methods (push data on the click, but still use the "native" link click handler for the event).
You can also try to specify "beacon" as the transport method in your Google Analytics tags, on browsers that support this (which I think is only Chrome at the moment) GA will then use the navigator.sendBeacon interface, which sends the data even in case the page unloads.
You might think that Google's solution is not very elegant (but the simple delay has the advantage that it works for all tags, not just for GA), but they have not "forgotten" the problem.
Also solutions that combine GA hit callbacks with timeouts that redirects if the callback fails as proposed i.e. by Simo Ahava somewhere should be be doable with GTM, even if they are probably more cumbersome to implement in GA.

setTimeout not executing the passed function

I'm working on a simple interface for testers to use, which I'm writing as an HTML page. What I need to do is open a specific URL when the user presses a button (the URL triggers a Hudson/Jenkins job on another server). Here is the code I'm using to accomplish this:
function triggerJob() {
var url = "...";
var trigger = window.open(url);
setTimeout(function() {trigger.close();}, 1000);
}
A couple of notes:
I know this a bad way of accomplishing what I want to do. I have already implemented the solution using jQuery, and for some reason the job on the Hudson server does not get kicked off when querying the URL in that way. The weird thing is that when I query it using a Ruby script from the same machine, it works just fine.
I have to do the timeout because if I just open the window then immediately close it, the browser does what it is supposed to, but it's too quick for the Hudson server to register it and start the job.
I have tried putting other statements besides trigger.close(); inside the anonymous function, and they are not executed either. There is no question that setTimeout is not executing the block it is supposed to be.
Thank you for any help you may be able to give me. I have been toying with this for hours and cannot figure out why my code is not doing the timeout right.
figured out this problem in the course of doing something else, so I thought I'd share the solution in case anyone else has the same problem. The issue was that I was calling this function using the onClick attribute of a submit button in a form. When the form is submitted it calls the function, and then the page is immediately reloaded after the function executes, which cancels the timeout that was set in the triggerJob function. You must use a link, radio button, etc. if you want to use setTimeout in this manner. Thanks for everyone who tried to help me.
Drew

javascript event only on leaving site

I am creating my own simple stats to record which pages were read and for how long etc.
I then use an ajax call to record the info in a database, it's working using the window.ONBEFOREUNLOAD event, however this creates a database record for each page visited and instead I want to save the page stats to js variables and then only do 1 ajax call when the visitor finally leaves the site.
Is there a way of creating an event listener using pure javascript to detect when the user leaves the site, maybe by evaluation the body's click event ???
No.
It is not possible for a browser to provide such an event by default: the browser itself has no awareness of what encompasses an entire site, it's thus impossible for a browser to know when a user leaves a site.
It is easy implement a solution yourself in JavaScript. The implementation is easy, the solution is hard.
You need to consider how you can tell when a user leaves your site. How do you define exit points? Can you define exit points? This is a non-trivial problem. I am not certain a solution exists.
Method 1:
Try the onbeforeunload event: It is fired just before the page is unloaded
It also allows you to ask back if the user really wants to leave.
see this demo
alternatively, you can send out an ajax request when he leaves.
Method 2 :
`if(window.screenTop > 10000)
alert("Window is closed");
else
alert("Window stillOpen");`
Method 3 :
See this article.
The feature you are looking for is the onbeforeunload
sample code:
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
All information in this answer are found on StackOverflow.com

Detect if the user has used the back button

My webpage runs a javascript function when the page is loaded. However, I don't want the function to run if the user comes back to this page using the back button. How can I prevent this using javascript?
$(document).ready(function(){
// Do not run this function if the user has arrived here using the back button
RefreshThePage();
});
I'd have thought that using cookies is the easiest way to do this
I think studying the way Struts handles duplicate form submissions could help you.
Some links:
http://www.techfaq360.com/tutorial/multiclick.jsp
http://www.java-samples.com/showtutorial.php?tutorialid=582
http://www.xinotes.org/notes/note/369/
Track when user hits back button on the browser
There are multiple ways of doing it, though some will only work in certain browsers. One that I know off the top of my head is to embed a tiny near-invisible iframe on the page. When the user hits the back button the iframe is navigated back which you can detect and then update your page. Here is another solution.
You might also want to go view source on something like gmail and see how they do it.
Here's a library for the sort of thing you're looking for by the way
The event object offers you to get the key code. so basically you register an eventlistener onKeyDown. Use the received event. if the keycode matches the key you like continue with your function.
document getElementById('elementId').onKeyDown = checkKey();
function checkKey(event) {
if (event.keyCode === keyCode) then . . .
}
play around with alert(event.keyCode); to find the right one.

Categories

Resources