I have created a overlay and inside that overlay there's another div. I want to close the overlay when the user click on the overlay part and not do anything if the user clicks the child div. I have implemented the closing the overlay function.But the issue is it closes the overlay even if the user clicks on the child div. How can I fix this?
<div id="overlay" onClick={this.props.hideOverlay}>
<div className="ques_preview_div">
</div>
</div>
So basically the overlay should not close if the user clicks somewhere in this div.
<div className="ques_preview_div">
</div>
My previous answer did not work therefore I created a CodePen
function childClick(event){
event.stopPropagation()
console.log('child')
}
the problem is based on event bubbling of the child. So if the child is clicked although it does not have a onClick function it still bubbles upwards -> the parent onClick is called. To prevent this we have to add a onClick for the child and simply stopPropagation()
Related
When you activate contenteditable in the div and enter text, the shadow dom form looks like the following.
<div id="editor" contenteditable="true">
<div>1번줄</div>
<div>2번줄</div>
</div>
If you enter text and hit enter, a new div is created and the entered text is placed inside the created div.
Is there any way to detect child element creation event of editor?
And is there a related example where I can create functionality like contenteditable in a way that doesn't use contenteditable ?
I can't quite remember the keywords.
I am doing an application which the user receives a list of items to choose. When the user moves the mouse, a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it, an ONCLICK function marks the clicked div and redirects to a website( _blank ). Perfect, but when you go back to this page, there is two div selected. The div user has clicked and another one. If the user moves the mouse, even if a little, the second div goes backs to normal.
What I want is to go back to the page and only the div clicked is marked.
It only happens on Google Chrome
Jsfiddle ---->
https://jsfiddle.net/u4ssywov/23/
Print Screen -->
http://postimg.org/image/ynr6vjdlh/
Is it possible to solve and not mark a second DIV?
If I do not redirect to a website, it works normally, but I need to redirect. =(
I basically want to hide the tooltip on click anywhere in the chart. For this I have configured tooltip as follows:
tooltip:{
hideDelay: 50000 //So that the tooltip stays open for a long time
}
You can check out the example at:
http://jsfiddle.net/e56KT/16/
Anyone with bright ideas!!!
Updated Question:
Before hiding the tooltip:
After hiding the tooltip:
As you can see the div element si not hiding even after hiding the tooltip by the method you described. In a series chart, if we customize the tooltip with increased width and height, the mouse over on other markers doesn't work as this div element stays on top of those markers.
Your code is actually working. It appears not to though because the hide method honors the hideDelay. If you want it to hide immediately try:
hideTooltip = function(){
chart.tooltip.label.fadeOut();
chart.tooltip.isHidden = true;
}
This is what the hide method does internally.
Finally, if you want it to hide if you click anywhere on the chart then I'd hook both the chart: events: click event and the plotOptions: events: click event.
See updated fiddle here.
I have the following HTML code:
<div onclick="window.open('http://example.com')" >
<p>1234 Main St, New York, NY</p>
<p>Price: $200,000/p>
<p>4 Beds / 3 Baths</p>
<p>2000 sqft</p>
More Info
</div>
If the person hovers over the part of the DIV that is not the hyperlink, it only opens one window.
If the person clicks on the hyperlink within the DIV, it opens 2 windows (one for the DIV and one for the hyperlink).
Is there any way around this 2x opening window scenario?
The simple solution:
More Info
You could make the div clickable by making the link into a block element with css
div a {
display: block;
}
That's because the click event bubbles up. It initiates when you click the anchor element, than bubbles up to the div, and executes that too.
You need to capture the click event inside the div (using a function), and then call the event's stopPropagation method to stop it from bubbling up.
More info about event bubbling here: http://www.quirksmode.org/js/events_order.html
You could use the same function in both the DIV and the A HREF, and manage the opening inside that function to call the window only once, that will work.
Edit : If you care at least a little about Search Engine Optimization you should not use that caption for the link, but more something mentionning the content of the next page like "House details" or better depending of the context/look of the page.
I came across the same issue and please don`t laugh on my silly mistake. But two tabs was opening because i am having a link and having target='_blank' and also calling a function too on the same like:
<pre>
$('#foo').on('click',function(){
// some code
window.open("https://www.google.com","_blank");
});
where also i have added the target as _blank. i removed the target attribute from the anchor and it works fine for me. Hope you are not doing same.
I would just like to have an editable div that acts like a textarea that is given focus on page load (i.e. the blinking cursor is visible and typing shows up in the div without having to select the div with the mouse). I've tried calling focus() on the editable div, but that doesn't work.
I'm not sure it's possible to control the cursor, but you can simply focus the element:
function initPage() {
var elEd = document.getElementById('editor');
elEd.contentEditable=true;
elEd.focus();
}
In Chrome, if your element with ID editor has any content then the whole content will be selected. In Firefox you don't see a cursor, but if you type after loading the page it will appear in the element. Simple example here.