<a id="button-a">a</a>
<a id="button-b">b</a>
I want click button a, the button b will also accept a click event;
click button b, the button a will also execute a click event.
how to make that in js? thanks.
$('#button-a').click(function(e) {
// do stuff
if (this !== event.target) return; // avoid infinite loop
$('#button-b').click(e);
});
Though as Nick Craver said, this is almost certainly the wrong solution; you should rather explain what the problem is.
At any time, you can call document.getElementById('button-b').click() ~ like somewhere in the event that handles the a-click. (or the library appropriate call to get an elemeny by id, e.g $('#button-b').click())
This is pretty basic, once you've seen how it works. Check out the JSFiddle example.
<a id="button-a" onclick="document.getElementById('button-b').click();">[a]</a>
<a id="button-b" onclick="alert('something else');">[b]</a>
http://jsfiddle.net/3eZPu/
Related
I am using the ng-multiselect-dropdown package in angular 5 for creating a multi-select dropdown.
I want to do call a function on close or hide of the drop-down component.
like this
closeDropdown : function(){
console.log("dropdown close triggered");
}
According to the documentation you can pass closeDropDownOnSelection value true to close the dropdown whenever the selection is done
ng-multiselect dropdown
Incase of multiple selection you can call (onSelect)="onItemSelect($event)"
for more information check this Demo documentation
You can call the function within (change) event.
ex :
<ng-multiselect-dropdown
(blur)="closeDropdown($event)"
>
</ng-multiselect-dropdown>
To solve the bug identified by satira ( I couldn't comment due to low reputation), ie.
"When the component which has this multi-dropdown opens for the first time or you reload the page and click anywhere outside the dropdown, onDropDownClose() gets called." For me, it didn't happen after the first time. Anyway, i solved it by getting the id of any element on the screen(header, footer or any div) and used docuement.getElementById('element_id').click() on ngAfterViewInit.
ngAfterViewInit() { document.getElementById('header').click(); }
This made sure that no sideeffects take place on my app. I know this is a messy solution but since closeDropdown() of ng-multidropdown doesn't work, this was my only way out.
I had this issue recently and found a solution that works for me using a combination of (ngModelChange) and (click). When using ng-multiselect-dropdown the other normal HTML Element triggers like (blur) and (change) don't work, but the (ngModelChange) does work. Only problem with that is it triggers when being initialized. But I added a boolean variable to the (click) trigger that does seem to work.
Note that this also works to cover the onSelect, onDeSelect, etc
component.ts:
...
dropDownSelect: boolean = false;
dropDownSelection: number;
...
saveFunction(event) {
if(!this.dropDownSelect) return;
...
this.dropDownSelect = false;
}
component.html:
...
<ng-multiselect-dropdown [data]="dataSource" [(ngModel)]="dropDownSelection" [settings]="dropDownSettings" (click)="dropDownSelect = true" (ngModelChange)="saveFunction($event)"></ng-multiselect-dropdown>
...
I tried #misterz's solution but it didn't work. However I modified it and it works perfectly.
The trick:
In addition to (onDropDownClose), listen to a click event;
// this act as a differentiator between other calls(bug) and an intended call
(click)="dropDownSelect = true".
In your component, declare your variable and use it like this:
dropDownSelect = false;
saveFunction($event) {
if (this.dropDownSelect) {
// close the opening to subsequent actions
this.dropDownSelect = false;
// Perform action;
};
}
I have a code similar to this:
<a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'></a>
Now I want the href link to work as normal if you click on the text, but if you click on the image, it should do something else and not goto the link at all.
There is also a restriction, I cannot edit the link or its text, the only thing that I have total control over is the img tag and its called onclick function. So I have to prevent the link from going on from within that img tag.
Any help will be appreciated.
Just preventDefault on the click event when the target is an <img>
yourAnchor.addEventListener('click', function (e) {
if (e.target.tagName === 'IMG')
e.preventDefault();
});
Now I want the href link to work as normal if you click on the text, but if you click on the image, it should do something else and not goto the link at all.
The correct way to do that is to not put the img inside the link.
However, if you really want to do that, change your onclick to:
onclick='doEdit(event)'
...and in doEdit:
function doEdit(event) {
if (event.stopPropagation) {
event.stopPropagation(); // Standard
}
else {
event.cancelBubble = true; // Old IE
}
// ...your img logic...
}
That will prevent the click event from bubbling to the link. You need the test for stopPropagation because IE8 and earlier don't have it (or preventDefault), they use properties instead (cancelBubble = true for stopPropagation and returnValue = false for preventDefault). (We're probably stuck with IE8 at least another year, maybe more, despite XP end-of-life...)
Pass the event through to the doEvent method call, similar to this:
<a href='link.html'>goto link page <img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit(event)'></a>
Then you can call event.preventDefault() to cancel the event and do your own thing, similar to this:
function doEdit(event){
// your code here
event.preventDefault();
}
DEMO - Using the event object to cancel the event.
Im not quite sure what you mean but if you want the text to have a link and the image to have a onclick event
text
<a href='link.html'>goto link page</a>
image
<img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'></img>
My initial thought is to simply remove the image tag from between the link tags.
<a href='link.html'>goto link page</a>
<img src='images/edit.gif' alt='Dont Go, just edit' onclick='doEdit()'/>
Are there more restrictions that do not allow you to do something like this?
I'm trying to make a my link work only when Ctrl+Shift is pressed, otherwise I'd like it to do nothing. I can't seem to get it to work though. Any ideas?
<html>
<head>
<script type="text/javascript">
function keycheck(){
if (e.ctrlKey && e.shiftKey) {;
document.getElementById("hello").onclick = function() {
location.href='http://www.mylink.com/';
}
}
else {;
document.getElementById("hello").onclick = function() {
location.href='#';
}
}
}
</script>
</head>
<body>
HELLO
</body>
</html>
Couple of things:
Without the use of a library such as jQuery you're going to get inconsistent results from straight onClick handlers. Especially when it comes to accessing the event object. If you are avoiding such libraries on purpose then be sure to research handling events a little more.
With the above caveat, your basic approach is to do the same condition you have but simply cancel the event behavior if it false (so they didn't have both keys pressed). You don't have to do anything when it's true because that is the default behavior anyway.
Event handling and cancelling is one of the areas where libraries prove extremely useful so you may get easier and better results using one and binding an on() or click() handler from which you can event.preventDefault();
Why? (curious)
You've already fired onclick using the A tag. You can't also onclick from the function you called onclick.
In order to reference e, you have to pass it in as an argument.
You can't pass e in as an argument, you want to reference event
This works
<script type="text/javascript">
function foo() {
console.log(event.ctrlKey);
console.log(event.shiftKey);
}
</script>
<a href="#" onclick="foo()">Foo
In the console, you'll see true or false if either of those keys are pressed at the time you click the link.
In order to have this link go to a specific URL when they are both pressed:
<script type="text/javascript">
function foo() {
if ( event.ctrlKey && event.shiftKey) {
window.location.href="foo.htm";
}
}
</script>
<a href="#" onclick="foo()">Foo
HOWEVER, in some browsers, pressing SHIFT + click opens the URL of a link in a new browser window. I can't think of a way to prevent that since it's a browser setting, which can't be controlled by JavaScript. What will happen in that case is that the current window will go forward to "foo.htm", but the link "#" will be opened in a new browser window.
In my program an area called 'validDrop' is highlighted for the user to drag and drop items into.
A new area is highlighted when the button, 'minibutton' is clicked.
I want to tell the program to only allow the button to be clicked if the current area (validDrop) is styled by 'wordglow2' and 'wordglow4'.
I have tried this, Why won't it work?
if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
$('.minibutton').click(true);
} else {
$('.minibutton').click(false);
}
Because hasClass doesn't take more than one parameter, and because .click either triggers a click or binds a click listener, it doesn't set clickability.
Depending on what .minibutton is, you could do something like:
var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);
If it's not a type that can be disabled, you might consider something like this:
$('.minibutton').toggleClass('disabled', !valid);
And bind the click listener like so:
$(document).on('click', '.minibutton:not(.disabled)', function() {
// click action here
});
As ThiefMaster points out in comments, $(validDrop).is('.wordglow2.wordglow4') is a functionally equivalent way of checking that the drop has both classes.
You can alsou use .bind() and .unbind() to add and remove click event to your button as in my example http://jsfiddle.net/Uz6Ej/
I have a menu on my aspx page which looks beautiful. It's exactly what I need (found it here).
Problem that I have is this: I need (somehow) to kick off a button control from the javascript. I realize that in the example, the menu items are simply href links, but I'm wondering how I could possibly do a postback and kick off my Button1_OnClick event.
Any ideas?
Thanks,
Jason
Please note that Button1 is an ASP button, with server-side VB.NET code behind it
You'll need something like
__doPostBack(*Button1's clientId*,"OnClick") ;
Button1 will have a property called "ClientID". You can echo that out to the HTML code to get the object by document.getElementById("<%= Button1.ClientID %>"), and from there you only have to invoke the click like normally.
So:
document.getElementById("<%= Button1.ClientID %>").click();
As noted by a commentator, the .click() method won't work in all browsers. Here is one another way to click a button in JavaScript (should also work with links):
// Where 'button' is the value of the document.getElementById() function:
if (button.dispatchEvent) {
var e = document.createEvent(“MouseEvents”);
e.initEvent(“click”, true, true);
button.dispatchEvent(e);
}
else {
button.click();
}
The click() method of any <a> element simulates a click.
You could make your <a /> links, LinkButtons. You could alternativly keep your <a /> links and put runat="server" on them and that would do it without having to fire a separate button click.