I created a contenteditable div. I want to lock text editing (in the example below, I want to lock "yes") within one of the children. Here's the HTML:
<div id="foo" contenteditable="true">this is a test
<div contenteditable="false">
<ul>
<li>
<a id="test" contenteditable="true" href="stackoverflow.com">a link here</a>
</li>
</ul>
yes
</div>
...
</div>
and JavaScript code:
document.getElementById('foo').addEventListener("keypress", function(e){
alert("div " + e.which);
});
document.getElementById('test').addEventListener("keypress", function(e){
alert("a " + e.which);
});
Link to demo: http://jsfiddle.net/wCs8J/1/
The problem is, when you click on the right side of <li> (when the cursor is default arrow), you'll be able to edit text in <a>. However, <a> doesn't receive keypress, only main div receives it. Why? And what should I do to make it working?
Taking the ContentEditable off the #foo continued to broadcast events from #test just fine
http://jsfiddle.net/Maslow/wCs8J/2/
Perhaps it's a browser specific problem?
Related
I have a div with a button inside of it that minimizes the div. If you click anywhere else inside the div it will load details about the div. However, I don't want to load details if minimizing the div. Here is my code:
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="minimize(key)">Minimize</button>
<span>The rest of the content is here</span>
</div>
When minimize is triggered, I want to ignore showDetails.
I'm not able to test it right now, but what you could try is
(click)="minimize(key, $event)"
In your component
minimize(key, event) {
event.preventDefault();
event.stopPropagation();
}
Try with either one of them and see how it goes !
what you have to do is to ignore the parent click event by stopping the propagation of the event using stopPropagation()
html code :
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="minimize(key,$event)">Minimize</button>
<span>The rest of the content is here</span>
</div>
ts code :
minimize(key,event){
event.stopPropagation();
}
use event.stopPropagation()
to prevent the click event from bubbling up the DOM.
What i did here to get around it pretty simple where you do not need create the function/method.
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="$event.stopPropagation()">Minimize</button>
<span>The rest of the content is here</span>
</div>
Hope this helps!
I have searched around but no question seems to address this concern.
I have the following markup:
<li>
<div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
<div class="boxInner-item">
<div class="triangle-topright-cover"></div>
<div class="triangle-topright-red"></div>
<div class="label-limitedsets">LIMITED SETS</div>
<img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
<div class="ui content">
<div class="productbrand">TECNO</div>
<div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
<div class="price">
<div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
<div class="usualprice">U.P. $588.00</div>
</div>
</div>
</div>
</div>
</li>
However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?
Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?
Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.
Although you don't want to use the element but if you replace the topmost div with "a" leaving the class id and css intact, you will get the same look and feel with the option of "open in new tab" as well.
For that purpose you need to use <a> tag and pass the href property to the tag
To Open in new tab on right click first we need to check the mouse click event and then open the link.
<div id="open">open</div>
$('#open').mousedown(function(event) {
if(event.which == 3) { //Right click event
window.open('http://google.com','_newtab'); // To open in new tab
} else{
alert('Please Right click to open');
}});
Working Code Pen
I have a listview in jQuery mobile where each entry contains several lines of text.
Clicking on the entry is supposed to replace some parts of the text with a <textarea> to make it editable. Clicking on the entry again should again replace the textarea with plain text (now edited).
While editing the text, the user should be able to click around within the textbox to select parts of the text or move the cursor around. To prevent click events from the textarea from bubbling, I use stopPropagation() on the event and that works quite nicely.
However, while this works in Chrome & Safari, both Firefox and Internet Explorer do not move the cursor nor let the user select parts of the text within the textarea.
Is there something I am missing here? (For Firefox, I am using version 19.0.2 on Windows 7, if that is relevant. I have tried using preventDefault or returning false, but that did not work - and why should it?)
I have created a JSFiddle here
The html code is
<ul id="listid" data-role="listview" data-filter="true" data-iconpos="center" data-split-icon="arrow-u" data-theme="c" data-split-theme="b" data-inset="true">
<li><a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
</p></a>
This does something else
</li>
</ul>
and the respective JavaScript is (loaded on body.onLoad here, but that is just for the JsFiddle):
window.toggled = false;
$("#link1").click( function(e){
var textarea = $("#textarea1").toggle();
var comment = $("#comment1").toggle();
if(window.toggled){
comment.html(textarea.val());
}
else{
textarea.val(comment.html());
}
toggled = !toggled;
});
$("#textarea1").click(function(e){
if(console && console.log){ console.log(e);}
e.stopPropagation();
});
Please ignore the not-quite-so-elegant solution for toggling the textarea.
IE is not happy with the textarea inside an anchor tag. See http://jsfiddle.net/zCfRu/
<a href="#" id="link1">
<h2>Title</h2>
<p>Here is some item<br />with several lines<br />
<span id="comment1">And this line is supposed to be editable</span>
</p>
</a>
<textarea style='display: none; width: 95%;' id="textarea1"></textarea>
i bind an eventhandler to the focusout-event of my text-inputfield.
this handler hides a div with some searchresults as soon as the inputfield losts its focus.
following my markup and a screenshot of the situation:
<li class="search">
<input type="text" id="searchbox" />
<div id="results">
<ol>
<li>...</li>
</ol>
</div>
</li>
when the user clicks on a item in the searchresults now, the inputfield fires the focusout event as desired.
i expected to be able extracting the element which gets the focus as next out of the eventobject. unfortunatly this seems not to be possible since only (some) mouse-events fill in the relatedTarget-property of the event.
is there any easy way to get the element which gains focus next?
Would this help you? http://plugins.jquery.com/project/focused
Not in older browsers, but there's document.activeElement too: https://developer.mozilla.org/en/DOM/document.activeElement
I have some HTML and jQuery that slides a div up and down to show or hide` it when a link is clicked:
<ul class="product-info">
<li>
YOU CLICK THIS TO SHOW/HIDE
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
}
My question is: How do I use preventDefault() to stop the link acting as a link and adding "#" to the end of my URL & jumping to the top of the page?
I can't figure out the right syntax, I just keep getting an error saying
preventDefault() is not a function.
Try something like:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
event.preventDefault();
$(this).next('div').slideToggle(200);
});
Here is the page about that in the jQuery documentation
Set the href attribute as href="javascript:;"
<ul class="product-info">
<li>
YOU CLICK THIS TO SHOW/HIDE
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
It's suggested that you do not use return false, as 3 things occur as a result:
event.preventDefault();
event.stopPropagation();
Stops callback execution and returns immediately when called.
So in this type of situation, you should really only use event.preventDefault();
Archive of article - jQuery Events: Stop (Mis)Using Return False
1 - Easy way:
Click Me
2 - using void(0):
Click Me
3 - Using preventDefault():
Click Me
4 - Yet another way of doing this in Javascript using inline onclick, IIFE, event and preventDefault():
Click Me
Alternatively, you could just return false from the click event:
$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
$(this).next('div').slideToggle(200);
+ return false;
});
Which would stop the A-Href being triggered.
Note however, for usability reasons, in an ideal world that href should still go somewhere, for the people whom want to open link in new tab ;)
This is a non-JQuery solution I just tested and it works.
<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
var links= document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].addEventListener("click",function(e){
alert("NOPE!, I won't take you there haha");
//prevent event action
e.preventDefault();
})
}
});
</script>
</head>
<body>
<div>
<ul>
<li>Google</li>
<li>Facebook</li>
<p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>
<ul class="product-info">
<li>
YOU CLICK THIS TO SHOW/HIDE
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
Use
javascript:void(0);
After several operations, when the page should finally go to <a href"..."> link you can do the following:
jQuery("a").click(function(e){
var self = jQuery(this);
var href = self.attr('href');
e.preventDefault();
// needed operations
window.location = href;
});
Why not just do it in css?
Take out the 'href' attribute in your anchor tag
<ul class="product-info">
<li>
<a>YOU CLICK THIS TO SHOW/HIDE</a>
<div class="toggle">
<p>CONTENT TO SHOW/HIDE</p>
</div>
</li>
</ul>
In your css,
a{
cursor: pointer;
}
If stopping the propagation of the event doesn't bother you, just use
return false;
at the end of your handler. In jQuery it prevents the default behaviour and it stop the event bubbling.
You can make use of return false; from the event call to stop the event propagation, it acts like an event.preventDefault(); negating it. Or you can use javascript:void(0) in href attribute to evaluate the given expression and then return undefined to the element.
Returning the event when it's called:
...
Void case:
...
You can see more about in: What's the effect of adding void(0) for href and 'return false' on click event listener of anchor tag?
In Javascript you can use it
window.event.preventDefault();
It works in my case. write the above line into your function.