I have a popup in a leaflet map that can be closed by clicking on the 'x' in its upper right corner. How do I make the click event not propagate to the map itself?
I've tried using preventPropagate() in many places and forms, but none of them seem to work.
My latest code looks like that:
<div class="actions" #click="stopPropagation($event)">
(...)
stopPropagation(e) {
e.stopPropagation()
}
The above div (.actions) is the popup's main div.
I have also tried calling the function at a click in the popup's component tag in the parent component, but the result was the same, meaning clicking the 'x' closes the popup as expected but also results in a click event in the map that lies behind.
I use Vue and vue2-leaflet.
I appreciate any insight from you guys. Thanks!
UPDATE: actually, doesn't matter where in the popup the click happens, it always gets propagated to the map behind.
So, for reference, here's my solution:
<div class="actions" #click="someMethod($event)">
(...)
someMethod(e) {
(... some code)
return false
}
The command 'return false' is what solved my problem.
I tried using '#click.stop', but it gives me the '$event.stopPropagation() is not a function' error. The same happens if I run 'e.stopPropagation()' from inside the function.
The accepted answer didn't work for me so I wrapped my l-map in a div and applied the click.stop to that.
<div #click.stop.prevent.self="">
<l-map...>
</div>
It seems to me that the actual click event is parsed by the leaflet library rather than the Vue-compatible vue-2-leaflet, so the event that is received by the function doesn't have stopPropagation or preventDefault methods on the object. Thus, when Vue calls them with .stop or .prevent, the JS engine throws an error.
This is what I figured out for my issue dealing with event handling and stopping the propagation.
e.g.
someReference.on("click", (evt: L.LeafletEvent) => {
// You don't try to reference the event (evt) that is passed in
L.DomEvent.stopPropagation; // Just call this and it kills the propagation
// or you can call
// L.DomEvent.preventDefault(evt);
...
})
Could try an event modifier
Perhaps the stop modifier:
<div class="actions" #click.stop="closePopup">
Related
<mat-checkbox (change)="handleProductClick(children, $event)" [(ngModel)] = "children.selected"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
handleProductClick(selectedProd : Product, event: any)
{
event.stopPropagation();
}
If I use click function instead of change it works fine. Although I can't use click. I have to stick with change. Is there a way to call stopPropagation from change function? If not what else can I do to stop the event propagation?
I got it working. Had to use both click and change on the checkbox. I had tried that earlier. The only difference was I was calling a function in the click method and it never got called. If you call $event.stopPropagation on click method in the template, it works well. strange. The below answer solved my problem. Angular 2 prevent click on parent when clicked on child
<mat-checkbox (change)="handleProductClick(children, $event)"[checked]="children.selected" (click)="$event.stopPropagation()"
[name]="children.grpId" [id]="children.id"></mat-checkbox>
I have form and input inside.
<input type="submit" label="Upload" data-dojo-type="dijit.form.Button" data-dojo-attach-point="leftLogoSubmit" id="leftLogoSubmit"/>
Is it possible push this button programmatically?
I tried
this.leftLogoSubmit.onclick();
but it not works.
Uncaught TypeError: this.leftLogoSubmit.onclick is not a function
You need to use on.emit().
It can be done in 2 ways:
As #tik27 stated:
dijit.registry.byId("leftLogoSubmit").emit('click', { cancelable:true, bubbles: true})
Note the 2 properties on the object. Without this, the click will not work properly.
You can also do:
on.emit(dojo.byId("leftLogoSubmit"), 'click', { cancelable:true, bubbles: true})
Where on is required as dojo/on
Last but not least, you can call the onClick method of the button directly (like #frank proposed):
dijit.registry.byId("leftLogoSubmit").onClick();
Difference is:
- in 1st case the widget is use to access the emit method (only works with Evented widgets)
- in 2nd case dojo/on is used so we need to pass the button domNode instead of the widget
- in 3rd it is not a native click (so will not bubble). It just call the button click handler
You can write like this
this.leftLogoSubmit.on("click", function() {
// Your code
});
you can fire the click function as.
this.leftLogoSubmit.onClick();
note: the capital C in the onClick.
You can go with core JavaScript solution
document.getElementById("leftLogoSubmit").click();
In addition to the 'back' button functioning as expected, I need to asynchronously invoke a function to update some db tables and refresh the UI.
Prior to making this post, I did some research and tried the following on this...
<h1 data-dojo-type="dojox.mobile.Heading" id="hdgSettings" data-dojo-props="label:'Settings',back:'Done',moveTo:'svStart',fixed:'top'"></h1>
dojo.connect(dijit.registry.byId("hdgSettings"), "onclick",
function() {
if (gblLoggerOn) WL.Logger.debug(">> hdgSettings(onclick) fired...");
loadTopLvlStats();
});
Since my heading doesn't have any other widgets than the 'back' button, I thought that attaching this event to it would solve my problem... it did nothing. So I changed it to this...
dojo.connect(dijit.registry.byId("hdgSettings")._body, "onclick",
function() {
if (gblLoggerOn) WL.Logger.debug(">> hdgSettings(onclick) fired...");
loadTopLvlStats();
});
As it turns out, the '._body' attribute must be shared by the Accordion widget that I just happen to use as my app's main UI component, and any attempt to interact w the Accordion rendered my entire app useless.
As a last resort, I guess I could simply forgo using the built-in 'back' button, and simply place my own tabBarButton on the heading to control my app's transition and event processing.
If the community suggests that I use my own tabBarButton, then so be it, however there has to be a way to cleanly attach an event to the built-in 'back' button support.
Thoughts?
The following should do the trick:
var backButton = dijit.registry.byId("hdgSettings").backButton;
if (backButton) {
dojo.connect(backButton, "onClick", function() { ... });
}
Remarks:
The code above should be executed via a dojo/ready call, to avoid using dijit's widget registry before it gets filled. See http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html.
Note the capitalization of the event name: "onClick" (not "onclick").
Not knowing what Dojo version you use (please always include the Dojo version information when asking questions), I kept your pre-AMD syntax, which is not recommended with recent Dojo versions (1.8, 1.9). See http://dojotoolkit.org/documentation/tutorials/1.9/modern_dojo/ for details.
In Dojo, I am trying to extend dijit.Dialog using templates. When I instantiate it, I get only the text in the dialog box, without the borders or close button. Is there some additional step I need to do to get it fully initialized?
My template is in template.html, it looks like so:
<div dojoType="dijit.Dialog" id="dynFilter" jsId="dynFilter">
"Dynamic Dialog"
</div>
Here is the dojo.declare:
dojo.declare(
"template.dialog", // class name
[dijit._Widget, dijit._Templated, dijit.Dialog], // parent classes
{
templateString : dojo.cache("autonomics", "template.html"),
}
);
After I instantiate it, I call .startup(), which doesn't seem to do anything, then .show(), which does place it on the page, missing most of its functionality.
var dialog = new template.dialog();
dialog.startup();
dialog.show();
What am I missing?
You overwrite the template of the original dijit/Dialog when subclassing.
Have a look to my answer to Dojo Dialog with confirmation button which solves the issue you are experiencing. Or go directly to working example at jsFiddle: http://jsfiddle.net/phusick/wkydY/
i'd like to do this:
show some form, handle Rectangle::onClicked event (disable form, set opacity to 0.2, process some javascript to submit form, then set opacity back to 1.0, enable form).
But I don't know how to do it.
It seems onClicked() is processed in "batch" mode, changing any ui properties aren't visible until the function exits. I played with states, transitions and animations, but still not succeed.
Thanks for any suggestion,
Michal
You can simply start two custom animations, one to hide the form and one to show it back. Something like this:
SequentialAnimation {
id: submitAndHideForm
ParallelAnimation {
// Animations to hide the form elements
}
ScriptAction {
script: submitForm()
}
}
ParallelAnimation {
id: showForm
// Animations to show the form elements
}
Then you could just start the first one with submitAndHideForm.start() when you want to submit the form, and when you get a response you can start the second one.
It should be possible to solve with states. You could try to do the Javascript processing in a WorkerScript. When the processing is done it will send back a reply to the QML WorkerScript element that sets the state of the form to enabled again. So in onClicked you do the disable animation by setting the state, and in the onMessage function of the WorkerScript element you do the enable animation by setting the state to "enabled".
Perhaps you talking about using XMLHttpRequest asynchronously. "Disable" form on sending request, and "enable" it when onreadystatechange called with readyState === XMLHttpRequest.DONE.