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.
Related
I'm trying to create an overlay which has an outer div (half see-through) and above an smaller inner content div. Clicking on the outer area makes the overlay dissappear. Clicking on the content area should interact with the overlay content.
Looking at my example code, clicking on the red area first raises an alert "red" and afterwards an alert "black" thus closing the overlay immediatly after the first interaction.
How can I prevent the onclick event of the underlying black div to trigger when the above red div is clicked?
<div onclick = "window.alert('black')" style = "background-color:black; width:100%; height:100%">
<div onclick = "window.alert('red')" style = "background-color:red; position: absolute; top:10%; left:10%; width: 80%; height: 80%;">
some content
</div>
</div>
I couldn't find anything online about that except people setting pointer-events to none which would disable the user to interact with the overlay content.
Also setting different z-indeices didn't work either.
If you want to verify the clickthrough happening: https://onlinegdb.com/rJbOmB0FV
This is more of a javascript behaviour you're experiencing.
Bubbling
The bubbling principle is simple.
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
Use event.stopPropagation()
Definition and Usage
The stopPropagation() method prevents propagation of the same event from being called.
Propagation means bubbling up to parent elements or capturing down to child elements.
https://www.w3schools.com/jsref/event_stoppropagation.asp
Update
A simple function will be easier to handle.
Something like this:
const alert = (text) => {
event.stopPropagation();
window.alert(text)
}
<div onclick = "alert('black')" style = "background-color:black; width:100%; height:100%">
<div onclick = "alert('red')" style = "background-color:red; position: absolute; top:10%; left:10%; width: 80%; height: 80%;">
some content
</div>
</div>
I'm using the packery library for Angularjs from here. It works fine but I found out that I cannot edit the textarea content when I click on it. After spending some time I was able to make it editable when I right click on the textarea element, but it still doesn't work if I click on it. So now I'm trying to manually trigger the right click event when I click on the textarea so it makes the element editable.
Here's the code
<packery ng-model="files" gutter="12" style="border:0px solid black;width:710px;" >
<packery-object ng-init="user_text='Write something ...';" class="large text sans-font medium-font box-border-raduis">
<div class="hidden-overflow sans-font medium-font" style="clear: both; border: 0px solid purple;
background: white; border-top: 6px solid #00a2d3; padding: 10px; ">
<textarea id="Mytextarea" contenteditable="true" style="margin: 0px;"
ng-click="click();"
>{{user_text}}
</textarea>
</div>
</packery-object>
</packery>
and here's the click() function that tries to trigger the oncontextmenu (right click) event:
$scope.click = function(){
console.log('clicked!');
var e = angular.element(document.querySelector('#Mytextarea'));
console.log(e);
angular.element(e).triggerHandler("oncontextmenu");
};
But this solution doesn't seem to be working. What am I doing wrong?
I would definitely recommend finding out what is preventing you to focus on the textarea since clicking on it and focusing is the default behaviour, however, you can try to instead of having a div wrapping the textarea use a label where the 'for' attribute is the textarea's id e.g:
<label for="Mytextarea" class="hidden-overflow sans-font medium-font" ...>
Textarea here
</label>
I'd usually not accept this since label is an inline element and textarea is a block element but in your case it might help you.
For tracking what is preventing you to focus I'd recommend right click on the textarea > inspect element, and then on the elements tab of Chrome dev tools look for the 'Event Listeners' tab (should be around the right corner of the window) there should be able to see all listeners that have been bound to that element and might help you track the source of the problem.
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/
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.
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/