div onclick only in viewable area - javascript

here is the scenario:
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000" onclick="alert(0)">
<textarea style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #FF0000" ondblclick="alert(1)"></textarea>
</div>
The main problem is that the textarea's ondblclick event does not get triggered.
What happens is that if i try to doubleclick in the textarea the div onclick is triggered. I want the onclick of the div to happen ONLY if i click in the area of the div that is not covered by the textarea. How can I achieve that ?
Thanks in advance!

Try reading up on event delegation and adding handlers unobtrusively
Basically you can assign one click or dblclick handler to the div element. Within that handler you can determine the originating element and take the necessary action(s). The links should provide you with further information about that.
edit a basic example (using jquery and one handler function)

Just cancel the event. For traditional event attaching, you have to put return false; in the end, but I'd advice to use some more modern ways to attach event listeners (namely, addEventListener or attachEvent for IE8 and older).

You can use timers to detect intent.
Set a timer when click occurs which will get executed if no subsequent clicks occur.
On double-click clear the timer and execute your default double-click functionality.
As below,
var dblClickIntentTimer = null;
elem.click(function(){
dblClickIntentTimer = setTimeout(function() {
//Wait for 100 ms and then execute 'click' functionality here
}, 100);
});
elem.dblclick(function(){
clearTimeout(dblClickIntentTimer);
//Do double-click functionality here
});

Related

How to MouseOver behind an object?

I'm trying to mouseover an image which is behind an another image.
Is there any way to render the front image like it is not there, so I can mouseover the other image behind it?
Example can be seen here:
I can't mouseover the characters which are behind the logo boundingbox.
You can set the CSS property pointer-events: none on the obstructing object... but be aware that pointer events are all or nothing; mouseovers and hovers will pass right through, but so will clicks.
Here is a description of the value, from the Mozilla Developer's Network:
none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
I've put together a little example. In this example, I'm using onmouseover and onmouseout, since that's what you use on your website, but you could just as easily use the CSS :hover pseudo-selector. Here's a jsfiddle version of the example, and the stack snippet is below.
.hoverable {
width: 100px;
height: 100px;
background-color: blue;
}
.obscuring {
/* this first line is the important part */
pointer-events: none;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
<div class="hoverable" onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = 'blue'"> </div>
<div class="obscuring"> </div>
You can create some invisible divs on top of the whole thing and put the hover behaviour on them. Then control the characters position with the position of the invisible divs.
Hope it makes sense.

click event on a iframe wrapped element

I may be losing my mind..
I have a div element which is holding an IFRAME. I registered a click event using javascript. That click event is not working when I am on IFRAME (grey region) but when I am clicking outside region of IFRAME (blue region), the click event is working fine.
What should I do to make this click event work even on IFRAME?
Fiddle
HTML:
<div id="main">
<iframe></iframe>
</div>
Javascript
var main = document.getElementById('main');
main.onclick = function () {
alert('hello');
}
PS: IFRAME is generating dynamically from a plugin, I can't access this code
You can add pointer-events: none; to iFrame's CSS - this way it will not capture clicks. Supported in FF, Safari, Chrome, Opera and IE11+.
Modify your fiddle:
iframe {
pointer-events:none;
width: 300px;
height: 300px;
border: 1px solid black;
background-color: grey;
}
New fiddle
Please note user will not be able to interact with iFrame this way.

Font-Awesome icon preventing click in parent button

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
Here's an example button:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap
Any ideas for why those left two pixels don't trigger a click event?
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.
Given this situation, we should definitly take a look at the CSS pointer-events Property
The pointer-events property defines whether or not an element reacts
to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:
button > i {
pointer-events: none;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup
over the same screen location. The sequence of these events is:
mousedown
mouseup
click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>

Onmousedown doesn't trickle down

In my html I have
<div id="map"></div>
#map {
width: 100%;
height: 100%;
background-color: #CCC;
}
that gets dynamically filled with several divs like the following
<div class="basicTiles1" style="left: 8128px; top: 8128px;"></div>
.basictiles1 {
position: absolute;
width: 64px;
height: 64px;
background-image: url(<snip urlToPng>);
background-position: 0px 0px;
}
Then an onmousedown event is added to #map like so
$('#map').on('mousedown', function(){console.log("mousedown");});
The event is never triggered. If I don't add the tiles to the map, it works.
I tried doing it with jquery's 'on', 'onmousedown', javascripts 'addEventListener'.
The script doesn't have any compilation errors. The event just doesn't seem to trickle down.
Is it because the tiles are position absolute? Is it because they are added dynamically?
I understand that when you bind the event, the DIV's are not there yet. Try using delegate instead, like this:
$("#map").delegate("div", "mousedown", function() {
console.log("mousedown");
});
EDIT: Elaborating
The jQuery .on() reference states: "Attach an event handler function for one or more events to the selected elements."
Moreover, when you bind the event directly to your #map it will work as long as you don't cover it with something else (you have to mousedown ON the actual #map element).
The jQuery .delegate() reference states instead: "Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements."
Since you will be adding inner div's -after- binding the event, this exactly fits what you want to do. Specifying the "div" selector actually binds mousedown to any (current or future) div inside #map. You could actually use div.basictiles1 if you have other, non-clickable divs there.

HTML button does not click even when is focused and the CSS rules kick in

Take a look at this button: http://jsfiddle.net/vtortola/Dnxpe/
I Chrome, if you click on the top border, even when the ":hover" and ":active" css rules triggers, the event is not triggered. If you click more in the center, then it works fine.
In IE9, if you do the same it miss the 50% of the clicks.
The problem are the margins, when you click the margins switch, giving the effect of the button being pushed, but this makes the pointer be out of the button if you are clicking the top border but... the event should be already triggered.... why this happen?
Thanks.
This probably happens because a click() is considered complete only once both mousedown() and mouseup() are completed in succession. In the case of clicking near the top border mouseup() never gets triggered and the same holds true for click().
If you use mousedown() it'll work every time, but it'll happen before the entire click is completed.
$('button').mousedown(function(e){
$('#clicks').append('<span>click </span>');
});
To solve this you could do the following:
Add a container to the button and then add a mousedown handler to the button and a mouseup handler to the container. If you make sure they were both invoked, then you can be sure that a click event on the button has been performed.
Like so:
HTML
<div id="cont"><button>Click me</button></div>
<div id="clicks">
</div>​​​​​​​​
JavaScript
var mdown = false;
$('button').mousedown(function(e){
mdown = true;
});
$('#cont').mouseup(function(e){
if (mdown)
{
$('#clicks').append('<span>click </span>');
mdown = false;
}
});
​
I checked out you code and find an interesting bug.Its because of CSS.
Even you can regenerate that bug.
Steps:
1. Click on button near top border but do not release your finger from mouse.
2. Now, look at the button,your button is actually pushed down and that's why,it does not able to fire button click event.
Solution:
Remove margin when button is active.
button:active,input[type=submit]:active
{
box-shadow: 0px 0px 3px 3px #D8F6CE;
}
I hope it helps.
Here's the solution I came up with that uses a css psudo element to capture the click event. The benefit here is that you don't need javascript. The click events are always captured by the :after and bubble up to the button.
http://jsfiddle.net/kevinrockwood/fUuUB/1/
The main thing to note is the css:
button:after{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Categories

Resources