We Keep Coding

On click outside of some element in vue without packages

I am wondering how can we hide all shown elements on click outside from those elements in vue:
<button #click="div1=true">Show div 1</button>
<div v-if="div1">DIV 1</div>
<button #click="div2=true">Show div 2</button>
<div v-if="div2">DIV 2</div>
How can I hide all divs besides div 1 if I click on div 1 or hide all divs on click on some random part of the page?
How does vuetify handle it?

Vue way is to use this.$el (DOM element of current component), you can change this.$el and use any other HTMLElement
<div class="modal" #click="handleClick">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
And method should look like this
handleClick(e: Event): void {
if (e.target instanceof HTMLElement && !this.$el.contains(e.target)) {
this.$emit("hide"); //fires only on click outside
}
}

It's easy to detect click outside of the element if you know how event bubbling works in DOM.
Hiding other divs works perfectly well when you put state of every div into the components's state.
Here is an example: https://codesandbox.io/s/0480m38mww?fontsize=14&module=%2Fsrc%2FApp.vue
Learn more about Event Bubbling here - https://javascript.info/bubbling-and-capturing

I used this process so Home component would know that outside my Nav component has been clicked. It helps that I have my nav inside my Home Component.
My Home component template:
<div>
<nav-bar ref="nav"></nav-bar>
<div #click="useHideNavMethod()">
So I use ref="nav" to use methods from the Nav in my Home component. This means I can use the hideNav() method (which resides in Nav).
I have purposely put the nav outside of this div with the click method, so anywhere clicked other than Nav would initiate the useHideNavMethod() function.
In my Nav component template I have:
<nav id="nav">
which is referenced when I use ref="nav".
So inside my hideNav() I have this.styleNavLi.display = 'none'; so it would hide the nav bar.
So all I need to do to use that method in Home is to use:
useHideNavMethod() {
this.$refs.nav.hideNav();
}

Use div1 = !div1 for toggle view,
Or use div1 = true for one time only.
<template>
<div>
{{ div1 }}
<button #click="div1 = !div1">Show div 1</button>
<div v-if="div1">DIV 1</div>
{{ div2 }}
<button #click="div2 = !div2">Show div 2</button>
<div v-if="div2">DIV 2</div>
</div>
</template>
<script>
export default {
data() {
return {
div1: true, // set default value as you want
div2: false,
};
},
};
</script>

calling different functions from different divs

I am having a structure like
<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>
when I am clicking on any div it's calling the first function. How to achieve the situation that only the div I clicked then the corresponding function is called. I am new to javascript.

Since your DIVs are nested inside each other, the click event will bubble out to each element. If you only want it to be on the inner DIV that you click on, you need to call event.stopPropagation() to stop the bubbling. This means you have to pass the event object to the functions.
<div onclick="first(event)">
//first div
<div onclick="second(event)">
//second div
<div onclick="third(event)">
//my content here inner div
</div>
</div>
</div>
Then the functions have to be like:
function first(e) {
e.stopPropagation();
// rest of code here
}

You can use event.stopPropagation() to stop the click event from bubbling up.
function first(){
this.event.stopPropagation();
alert( 'first div' );
}
function second(){
this.event.stopPropagation();
alert( 'second div' );
}
function third(){
this.event.stopPropagation();
alert( 'third div' );
}
<div onclick="first()">
//first div
<div onclick="second()">
//second div
<div onclick="third()">
//my content here inner div
</div>
</div>
</div>

Try Event.stopPropagation() which prevents further propagation of the current event in the capturing and bubbling phases.
function first(e){
e.stopPropagation();
alert('first function')
}
function second(e){
e.stopPropagation();
alert('second function')
}
function third(e){
e.stopPropagation();
alert('third function')
}
<div onclick="first(event)">
first div
<div onclick="second(event)">
second div
<div onclick="third(event)">
my content here inner div
</div>
</div>
</div>

The problem is that clicking on a child div, it triggers every parents of this div (clicking on third will triggered second which will trigger first).To prevent the propagation you need to stopPropagation like this
See onclick documentation
function first(e){
e.stopPropagation();
console.log('you are in first')
}
function second(e){
e.stopPropagation();
console.log('you are in second')
}
function third(e){
e.stopPropagation();
console.log('you are in third')
}
<div onclick="first(event)">
//first div
<div onclick="second(event)">
//second div
<div onclick="third(event)">
//my content here inner div
</div>
</div>
</div>

Don't trigger onClick for nested child elements

I have a simple modal component:
function Modal(props) {
return (
<div className={cx(styles.overlay, { show: props.show })} onClick={props.onClose}>
<div className={styles.modal}>
<span className={styles.closeBtn} onClick={props.onClose} />
{props.children}
</div>
</div>
)
}
the onClose prop triggers closing the modal, hence I attach it to styles.overlay (dark overlay that you typically see on modals that when clicked dissmises it) and to styles.closeBtn (a close button for modal).
The whole flow works besides the fact that anything inside styles.overlay when clicked on also dismisses the modal, which is not functionality I was after, hence I need to only dismiss it if that specific element is clicked not its children.

function Modal(props) {
return (
<div className={cx(styles.overlay, { show: props.show })} onClick= {props.onClose}>
<div className={styles.modal} onClick={e => e.preventDefault()}>
<span className={styles.closeBtn} onClick={props.onClose} />
{props.children}
</div>
</div>
)
}
I think, the best way is to have your overlay and your modal in two separate div, but this should work.

Add onClick(e)={e.stopPropagation();} to the modal dialog's click handler; this should prevent it from propagating to the overlay.
Hope it works! Good luck!

div onmouseover loses when going over other divs inside main div

I have a li,some other elements like divs, inputs inside this li,and everything inside the gridview.
I have a onmouseover="calcRoute();" on li.
PROBLEM : I have noticed that on hovering on inside element divs and coming out of element divs to the parent div causes the calcRoute(); to execute again ,ie bind google maps again, which causes a flickering due to map rebind.
TRIED : onmouseenter and onmouseleave,but it wont support in all browsers
<li onmouseover="calcRoute(8.4572136,76.94017529999996);return false; ">
<div class="li-inner">
<input type="image" name="ctl00$ContentPlaceHolder1$FESearchListingControl1$dlPhotoView$ctl01$imgPhotoView" id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_imgPhotoView" src="../UploadedImages/House2469-22-8-2012.jpg" style="height:142px;width:219px;border-width:0px;">
<div class="title">
<a id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_lblPropName" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$FESearchListingControl1$dlPhotoView$ctl01$lblPropName','')">Halloween</a>
<div class="star"></div>
</div>
<div class="address">
<div class="left-location">
<span id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_lblDistrict">Trivandrum</span>
</div>
<div class="right-price"><span class="WebRupee">Rs</span>
<span id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_lblPrice">500.00</span>
</div>
</div>
</div>
</li>

You can attach an id to the li elements and pass this id to the calcRoute function.
onmouseover="calcRoute(8.4572136,76.94017529999996, this.id);
Then, in this function you can set a flag for this li element that it's been hovered before.
var hoveredItems = {}; // this is a global object
function calcRoute(x,y,id) {
// put this control on top so that recurring operations will be prevented from being run.
if(hoveredItems[id]) return;
else hoveredItems[id] = true;
..
}
Maybe this helps...

Remove parent without an id or class using JQuery

So I have some html that looks like the following:
<div class='something unknown' id='something_unknown_1'>
<button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>
<div class='something unknown' id='something_unknown_2'>
<button onClick='removeParent(self)'>Remove me and my parent div</div>
</div>
...and so on. How exactly would I reference the button that fired the onClick without knowing the id of the button? I would like to eventually have my removeParent(self) method look like:
buttonThatWasClicked.parent().remove();

You can use this to reference to the button that was clicked inside the click handler.
$("button").click(function(){
removeParent($(this));
});
function removeParent(buttonThatWasClicked){
buttonThatWasClicked.parent().remove();
}

I would add a class to the buttons so the function does not get bound to every button on the page only the ones you would like it to.
<div class='something unknown' id='something unknown'>
<button class="myClass">Remove me and my parent div</div>
</div>
<div class='something unknown' id='something unknown'>
<button class="myClass" >Remove me and my parent div</div>
</div>
Then use the jquery class selector to bind a function that removes the parent.
$(".myClass").click(function(){
$(this).parent().remove();
});
Demo: http://jsfiddle.net/cXLqK/

If you have onclick on HTML nodes (i.e. not set via jQuery):
<div class='classA' id='idA'>
<button onclick='removeParent(this)'>Remove me and my parent div</div>
</div>
<div class='classB' id='idB'>
<button onclick='removeParent(this)'>Remove me and my parent div</div>
</div>
then this will work:
removeParent = function(e) {
$(e).parent().remove();
}
Working example:
http://jsfiddle.net/VEETt/