Detect link click event in chat window - javascript

I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg

Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});

You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});

Related

How to activate an <a> element on a web page with javascript?

I want to click on this element.
ini
There are other elements, just like that where only the href changes. I can correctly find the element I want. But cannot click it...
I tried the usual click() but didn't work:
document.getElementsByClassName("btn")[1].click()
Any help?
I tried this, it opens the same window, but I want to open in a new tab. I also put the internet option to open tabs with popups:
b=document.getElementsByClassName("btn")[1].href;
window.location.assign(b, '_blank');
How to open in new tab? I tried window.open() but never got to make it work:
window.open(b, '_blank');
You can find the answer here How can I trigger a JavaScript event click. If you execute the .click() function, you trigger all the listener that are bind on the 'click' ( .onClick ).
Try to listen for the click event and then execute the .click() function
I'm not really sure i understand the question all the way. But when you actually click a link all other JavaScripts stops loading and you get to that webpage. The window.open is right. But you have to prevent the Url to actually redirect you to the website. You can do this by using preventDefault on the eventobject that fires on your click. Hope this helps
let myLink = document.getElementsByClassName("btn")[1];
myLink.addEventListener('click', function newWindow(event) {
event.preventDefault();
window.open(this.href, '_blank')
})
myLink.click();

Force check dirtyforms.js

I'm trying to check for dirty form when swithing between tabs - and if the form is dirty, show the alert.
I'm using this plugin: https://github.com/snikch/jquery.dirtyforms
Ii works fine when trying to go to an external page (here i will get the warning), but when i switch between tabs(bootstrap), nothing happens. I have made a speciale class(".chkChange") to listen to if the form is dirty, but nothing happens when I click on a tab. The tabs looks like this:
<li class="setup-conditions"><a data-toggle="tab" class="chkChange" href="#setup-conditions">Procedure</a></li>
And i'm able to check if the form is dirt or not with this snippet, but i need help to trigger the alert build in dirtyforms:
$('#myTab li a').click(function () {
if ($('form').dirtyForms('isDirty')) {
//alert("Form is dirty");
}
});
And like i said, if I put the same class on another (external) link, it will prompt if anything has been changed - bot not on the tabs.
In this case, you can customize the event binding to attach the click handler to your link.
$(document).bind('bind.dirtyforms', function (ev, events) {
var originalBind = events.bind;
events.bind = function (e) {
$('#myTab li a').on('click', events.onAnchorClick);
originalBind(e);
};
});
Dirty Forms will then correctly
Check whether the form is dirty
If dirty, prevent the click event
Show the dialog
If the user decides to proceed, will refire the click event
Dirty Forms ignores your anchor tag by automatically because it has no HREF tag. This was a feature that was contributed by the community, that I am now reconsidering because apparently there is an argument to monitor anchor tags that don't have HREF sometimes.
Update
The default behavior has changed in 2.0.0-beta00005 to include links with no HREF tag by default. That should fix this so you don't need to attach the event. However, depending on what libraries you are using, you may need to add an ignoreSelector to Dirty Forms to stop watching them.
$('form').dirtyForms({ ignoreSelector: 'a.some-class:not([href])' });

javascript cancel href link when clicked <a href>

If i have multiple links on a website, is there a way that if they are clicked they can be transferred to another website? All the links can be the same, but when either one is clicked they transfer over to the same page.
I'm trying to find an event that cancels the bubble when the event is clicked but can't find one.
Say for example I have
google
when that link is clicked then it will cancel the google.com transfer and open yahoo.ca
Using jQuery you could bind a click handler that prevents the default, and instead redirects the page, like so.
$('a').click(function(ev) {
ev.preventDefault();
window.location = "http://www.example.com"
});
If you mean you can have any href in link and you click any of links in page, then you need preventDefault:
$('a').click(function(e){
e.preventDefault();
window.location = 'http://yahoo.ca';
});

How to detect if the user clicked the "back" button

When the user goes history-back-1...how do I detect that? And then, alert "the user clicked back!"
Using binds (and jQuery preferably)
You generally can't (browser security restriction). You can tell if the user navigates away from the page (onbeforeunload, onunload fire) but you can't tell where they went unless you've set up your page to allow it.
HTML5 introduces the HTML5 History API; in conforming browsers, the onpopstate event will fire if the user navigates back to an earlier "page" on your site.
try:
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
window.onpopstate=function()
{
alert("Back/Forward clicked!");
}
Following are the steps to detect back button click:
Register a mouse down event on body $('body').on('mousedown', 'on all li');
Now set a variable when mousedown event occur.
Check this variable when your location changes.
IF variable changes to true it means list clicked otherwise back button.
This work in my use case. This solution may help others because it depends on app design.
On the page you are looking at, you can add this piece of code to the onLoad event to move them back the page they were on.
if(history.length>0)history.go(+1)
If you want the alert then make it
if(history.length>0)alert("the user clicked back!")

How to trap "open in a new tab" clicks in jquery.click

I have a jquery script that attaches a click event to every link, running an action when the link is clicked. This has been working great, but I just got some betatester feedback that's foiling me.
The user was right-clicking on the link and opening it in a new tab. When she did this, jquery didn't trap the click. BAD USER. I reproduced this with cmd-click as well.
Is there a way to trap these gestures, or this an inherent limitation?
So you want to capture every click? Event the right or middle one? Shouldn't the mousedown event do just that?
Of course, she could right click a link just to "Copy Link Location"...
See if you can somehow make use of jQuery rightclick plugin:
http://abeautifulsite.net/notebook/68
Usage:
$(document).ready( function() {
// Capture right click
$("#selector").rightClick( function(e) {
// Do something
});
// Capture right mouse down
$("#selector").rightMouseDown( function(e) {
// Do something
});
// Capture right mouseup
$("#selector").rightMouseUp( function(e) {
// Do something
});
// Disable context menu on an element
$("#selector").noContext();
});
As for the cmd-clickie bit, I'm really not sure. In case it's helpful, here's the jQuery hotkeys plugin:
http://www.webappers.com/2008/07/31/bind-a-hot-key-combination-with-jquery-hotkeys/
I've seen jquery.rightclick.js code in firebug. There are modifiers with the mousedown and mouseup event like:
altKey
ctrlKey
so you can use these two modifiers:
if(evt.altKey || evt.ctrKey)
in jquery.rightclick.js

Categories