In the jQuery API it states
The click event is only triggered after this exact series of events:
The mouse button is depressed while the pointer is inside the
element.
The mouse button is released while the pointer is
inside the element.
However, I just noticed that in Firefox 39 the event is also triggerd when I select an input button element and then press return or the spacekey. Why is that? are there also other events that trigger the click event?
Here is an example, see the jFiddle. If I press the button with the mouse it changes the color as expected. But it also changes the color if I select the button and press return or spacekey.
<style>
div{
width: 200px;
height: 200px;
background-color: green;
}
.red{
background-color: red;
}
</style>
<input type='button' class='button' value='change color'>
<div></div>
<script>
$(document).ready(function(){
$('.button').click(function(e){
$('div').toggleClass('red');
});
});
</script>
The jQuery API documentation is misleading. The process it describes is the only way to trigger the click event with the mouse or other pointer device. The W3C recommends that browsers trigger the onclick event when the element is in focus and certain keyboard inputs happen. The reason for this recommendation is increased accessibility.
Related
I have this simple issue: a div that contains a link, and the div has an onclick function defined. However, when I click the link, I just want to follow the link, and not fire the containing div's function.
Fiddle
HTML
<div>
Google
</div>
JQuery
$('div').click(function() {
alert("test");
});
CSS
div {
height: 100px;
width: 200px;
border: 1px solid red
}
So here, when I click the div, an alert is shown: that's fine. When the link is clicked, I don't want the alert to show.
How to avoid this?
You can apply event.stopImmediatePropagation(); to the link. According to the API, this keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree (https://api.jquery.com/event.stopimmediatepropagation/).
Here is the fiddle: http://jsfiddle.net/dxrdrqrc/
Let's say I have Div A, with a child Div B. Both have a mouse click assigned to them. How might I be able to click Div A, and have both Div A's and Div B's events triggered? I've looked into event bubbling but all my attempts to make this happen have failed so far.
I am assigning mouse events as such:
elem.addEventListener( 'click', myResponseFunction, true );
I tried setting the bubbling to true and false on both or one or the other and have had no success. Is this possible? No jQuery solutions please.
Further clarification:
Consider an expandable ad with tiles in the collapsed portion that can either be video or synopsis, determined at runtime from a data provider. I want the ad to expand when clicked anywhere in the collapsed portion, but if a "view video" button or "view synopsis" button is below the click-to-expand button, I'd like the ad to advance to the appropriate view after expanding. I desired a cleaner approach, if possible, than putting the expand action on each tile's call-to-action button. Each tile is a div with a background image and call-to-action button, all covered by and click-to-expand button.
Click events are only triggered on those elements that are under mouse/touch pointer.
Bubbling (up) means that once a child element has processed a click event it then triggers another event of the same type on it's parent element. This process repeats all the way up to the document element. What you want is bubbling down. Unfortunately that concept doesn't exist in JavaScript.
A pragmatic solution is to iterate over all child nodes and trigger click events manually when a parent node is clicked. There will be one side effect: mouse events bubble up by default and so when a child node is clicked, it's parent will also receive a click event. This can be easily solved by stopping event propagation further up inside of a child click event handler.
Here is a complete sample:
document.querySelector('.parent').addEventListener('click', function(e) {
console.log('hello from parent');
var children = this.children;
[].forEach.call(children, function(elem) {
elem.click();
});
});
document.querySelector('.child').addEventListener('click', function(e) {
e.stopPropagation();
console.log('hello from child');
});
.parent {
height: 300px;
width: 400px;
background-color: lightblue;
}
.child {
position: relative;
top: 100px;
left: 100px;
height: 100px;
width: 200px;
background-color: lightyellow;
}
<div class='parent'>
<div class='child'></div>
</div>
What I'm trying to do is make it so that, when a user clicks in the textarea, it expands the div to show the 'Post' button.
Here's a picture of what I mean:
So, when the user clicks in the textbox area, I need the background div to expand and show the 'Post' button.
Here's the JSFiddle I started: http://jsfiddle.net/MgcDU/6018/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary" type="button">Post</button>
<div class="clearfix"></div>
</div>
CSS:
textarea {
margin-bottom: 0;
}
.btn {
float: right;
margin-top: 12px;
}
.container {
margin:20px 0 0 20px;
}
.well {
width: 476px;
padding: 12px;
}
I have no JavaScript experience, but I think this is a simple enough project to look at when finished to be able to understand the basics.
Add the following to your markup and styling and include the script.
HTML
<button class="btn btn-primary btn-toggle" type="button">Post</button>
CSS
.btn-toggle{
display: none;
}
Javascript
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
This segment of Javascript binds click event handlers to the textarea and the document. The event handler bound to the textarea simply slides down the button to make it visible.
The event handler bound to the document is fired on every click on the page since the click events propagate up the DOM to the document. Once the document fires the event, the handler checks to see if the target (aka element clicked) has a parent inside the well. If it does we do not perform any actions since we do not want to hide the button when the user clicks inside the textarea or the button itself. If the click is outside of the well we call the slideup function on the button to hide it in a stylish manner.
Working Example: http://jsfiddle.net/MgcDU/6025/
Kevin's answer is the one you want, but I was just feeling experimental with some CSS I had, so I just wanted to post it. This is a fadeInDown button. You may want to host the CSS on your website. I just used some code I had. You can change this fiddle to fadeIn or something else (just search Google for animate.css). http://jsfiddle.net/shaansingh/MgcDU/6024/embedded/result/
Seeing as though Nested Anchor Tags are not possible, could Javascript be utilized to have a Div Box hyperlink to Page-A, while having a word of a Text within the Div Box hyperlink to Page-B?
Have tried working with the following Javascript (works for hyperlinking the Box or the Text, but not both):
<script type="text/javascript">
// Content-Link Click Events
$('.content-link-page-a').click(function(){
window.location.href = "page-a.html";
});
$('.content-link-page-b').click(function(){
window.location.href = "page-b.html";
});
</script>
Here's some CSS:
<style>
.box {
height: 50px;
width: 100px;
border: 1px solid #000;
}
</style>
And here's the HTML:
<div class="box content-link-page-a">
<div id="username" class="content-link-page-b">UserName</div>
</div><!--/box-->
You should remove the A from around the inner DIV, give it a bigger z-index than the outer, and handle the inner click event with calling event.stopPropagation to prevent bubbling of the event to the outer div. Here is a fiddle to solve the task.
Sample for the inner handler:
$('.content-link-page-b').click(function(e){
alert("page-b.html");
e.stopPropagation();
});
EDIT: In my comment above, I mentioned e.preventDefault() call. I didn't mean that, because that means the native DOM element's handler will be prevented, and not the jQuery event bubbling.
My website has input buttons that move 1px when they are :active.
And, I can't catch the click event in case that I click one's border, because it moves a little away.
Here is an example.
You can't get the click event.
HTML:
<input type="button" value="Click Me!">
CSS:
input{
width: 100px;
height: 50px;
}
input:active{
position: relative;
top: 50px;
left: 100px;
}
jQuery:
$(function() {
$('input').on('click', function() {
alert('You caught me!');
});
});
DEMO:
http://jsfiddle.net/duwYv/
You could try mousedown instead of click: http://jsfiddle.net/duwYv/6/
Alternatively you could move the input with jQuery once it has been clicked: http://jsfiddle.net/duwYv/8/
Here's the thing, active happens on mousedown while you're pressing the mouse button. You're trying to handle the onclick event which is fired after the click has finished
In your case, a "full click" never happens. I'm not sure about your question, but if you want to view the message the when the mouse button is pressed, change your code to:
$('input').on('mousedown'