When a div inside a table is clicked stoppropagation does not trigger until after click bubbles to tr. How do I stop bubbling out of the div?
http://jsfiddle.net/tcbnW/ dictates my issue
div clicked! → tr clicked! → STOP triggered
I need
div clicked! → STOP triggered
html code below
<table>
<tr onclick="$('#INFO').append('tr clicked!<BR>');">
<td>
<div onclick="$('#INFO').append('div clicked!<BR>');" style="font-weight:bold;" class="STOP">test div</div>
</td>
</tr>
</table>
<div id="INFO" style="border:1px solid #F00;"></div>
script
$(document).on('click','.STOP',function(event){
$('#INFO').append('STOP triggered<BR>');
event.stopPropagation();
});
using jquery 1.9
You should not mix “traditional” event handling (onfoo HTML attributes) and “modern” event handling (using addEventListener etc.), as jQuery does – unexpected results are bound to occur.
try to remove the onclick event from the div. Basically you are having 2 listeners for the same event one is embedded within the onclick and the second one is $(document).on
Take a look at this: [a link] http://jsfiddle.net/tcbnW/1/ . This is one addition
event.stopImmediatePropagation();
I think this should work.
Related
I am trying to use one of the 'checkbox hacks' in which an accordion opens or closes when the user clicks on a label that toggles a checkbox.
The issue is that the webpage I am working on does not use labels, but rather h4 elements. So the user would be clicking on the h4 element to open/close the accordion. As far as I know, making this work directly is not possible. Or is it? I thought that maybe I could overlay an empty label over this h4 element, so that the user would be clicking on the label. Is that possible? Or is making a javascript accordion the only option here?
Here's a suggestion how to do it:
<body>
<!-- Add cursor : pointer to show the user he can click -->
<h1 onClick="myFunc()" style="cursor: pointer;">test</h1>
<script>
// Do something here
function myFunc(){
console.log("title clicked")
}
</script>
</body>
Well the real reason i need to know this is due to the working of my modal
In my modal's JavaScript code , its defined to trigger open modal window only when the class is "modal-button"
let open_modals = [];
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
Below is the html code which works perfectly along with this
<!-- Trigger/Open The Modal -->
Click Me
Although i want the text "Click Me" to not inherit the properties of class "modal-button" but still have that class ,so modal opening functionality is not broken. Hence i tried something like this...
<!-- Trigger/Open The Modal -->
<div class="modal-button">
<span class="text">Click Me</span>
</div
But it is breaking the modal opening functionality probably because the text-"Click Me" is not inhereting class "modal-button" due to the span tag
Hence i think i have to find an alternative of span tag for styling inline elements
Hopefully someone can give me a better approach to this
Thanks in advance
There's nothing stopping you from having two classes on the same element like this:
Click Me
The second class listed will take priority over the first for styling, but the element will still be found by any CSS query that looks for the first class.
to visualize my issue, I created the following html structure:
a father div
a children div
Both are with the same attributes: contenteditable="true" tabindex="0".
main.html:
<html>
<div>
<div contenteditable="true" tabindex="0">
firstDivText
<div contenteditable="true" tabindex="0">
secondDivText
</div>
</div>
</div>
</html>
Problem:
Navigating with tabs only (tabindex is 0 so its allowed), I can navigate to father and child with no problem.
When focus (given from tab) is on the father element, I can immediatly start typing to modify its context (contentEditable true).
But when focus is on the child element, I must click it before I can modify the text!
Question:
Why is this happening?
How can I fix it so that which element that is currently on focus will "receive" the key strokes?
Don't want to avoid using contentEditable nor to use jquery :S
You better use inputs and avoid content editable you can style it to look the same.
.myInput{
background:rgba(0,0,0,0);
border:none;
}
edit:
if you really must you can fire click event on focus
$(".Mycontenteditable").focus(function(){
$(this).click();
});
What elements allow link?
I want to wrap a link around a table,
<a href="123.php" class="grap" >
<table border="1" style="width:600px; height:600px;">
<tbody>
<tr>
<td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
</tr>
</tbody>
</table>
</a>
But it is not a correct html as in http://validator.w3.org/
I can put the link in a form like this,
<form action="123.php" class="grap" >
<table border="1" style="width:600px; height:600px;">
<tbody>
<tr>
<td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
</tr>
</tbody>
</table>
</form>
But the link or the table is not meant to be a form form submission...
I wonder if there are anyway to wrap a table in a link?
EDIT:
Sorry forgot the mention that I need to grab the link url like this,
$('.grap').click(function(){
alert($(this).attr('action'));
return false;
});
<a> is an Inline-Element and <table> is a block element. Block elements are not allowed in inline elements in xhtml. But what about a click listener on the table, or an div around the table? The effect should be the same.
This might be also interesting for you:
Is it wrong to change a block element to inline with CSS if it contains another block element?
Browsers let you wrap a table inside a link. The practical problems with it relate to rendering (browsers may or may not underline the text content and draw borders around images inside a link), not with basic functionality. It’s not valid as per HTML 4.01 for example, but so what?
In your example, the table contains just one cell that contains just one image. You could instead use just an img element and style it suitably. In a more complicated case, a table might be useful. Then you should probably set color and text-decoration for it in CSS and border for any img contained in it, so that you get the rendering you prefer and not the varying browser default rendering for a situation like this.
You can not wrap a block level element (such as a table) in an inline element (such as an anchor). You could, however, use display: block; to make the anchor block level.
You could also use Javascript event handlers to link the table. For instance, you could have this snippet of code in your head tag that assigns an onclick event to the table.
Where, idOfYourSpecifiedTable is the id attribute of your table (ie <table id='idOfYourSpecifiedTable'>),
<script type="text/javascript">
document.getElementById('idOfYourSpecifiedTable').onclick = function() {window.location.href='123.php'};
</script>
or in jQuery
<script type="text/javascript">
$(function() {
$('#idOfYourSpecifiedTable').click(function() {window.location.href='123.php';});
});
</script>
Furthermore, you could even use #idOfYourSpecifiedTable {cursor: pointer;} to make the cursor a pointer (hand) when a client hovers over it.
However, this method has its weaknesses. Notably, a search engine robot will likely not detect your table as linked to another page of your site.
I have a webapplication where (as in many other ones out there) you click on an image to do something, for instance, mark an entry, send a mail, flag something...
Short, clicking on the image is supposed to call an action (via javascript, but that's not the point).
I was wondering, what is the "right" way to do this?
<a>-tag? Hmm... actually it is not a link...
<button>? Because obviously a button is the semantic element for calling an action...
<div>?
Any hints?
Short Answer
Use an <img> - not a button or an anchor or an input - as the rest suggest that the element is interactive, even without JavaScript.
Long Answer
clicking on the image is supposed to call an action (via javascript, but that's not the point).
I disagree; that is the point :)
Because the clicking activates JS-only features, your image should only be available in a JS environment.
As such the proper way is to insert it with JavaScript; while an HTML document should be semantically correct, a DOM structure doesn't really need to be semantically correct, so which element you use becomes irrelevant.
The Wrong Way
<div>
Click on the image to do something:
</div>
<div>
Click on the image to do something: <input type="image" onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <img onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button>
</div>
These are all wrong because a user who doesn't have JavaScript sees these items and can't use them.
Of all of these, I'd say the <img> is the lesser evil, as it doesn't suggest an interactive element. The greatest evil is using the <a> as an anchor should be a hyperlink to another document, and you should never, ever use the javascript: protocol.
You'll still have the same problem when you add the JavaScript event handlers externally:
/* external .js file */
document.getElementById("myButton").onclick = wtv;
<!-- HTML document -->
<div id="myButtonParent">
Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)"> </a>
</div>
As, again, you still have the (non-functioning) hyperlink available to those users who don't have JavaScript.
Instead
Instead, insert the whole damn thing using DOM scripting! I'm going to use an <img> with an onclick event:
/* external .js file */
window.onload = function() {
var img = document.createElement("img");
img.src = "...";
img.onclick = wtv;
img.style.cursor = "pointer"; // so the mouse turns into a finger,
// like on a hyperlink
// Note: instead assign a class attribute and put this in an external CSS file...
document.getElementById("myButtonParent").appendChild(img);
}
You could add an onclick event for the image:
<img id='image1' onclick="javascript:DoSomething()"...
or add it via jquery:
$("#image1").click(
function() {
DoSomething();
});
I don't think you should use an anchor tag here. Anchoring is for navigating not doing things. Not to mention if you use the beforeunload events, they will get fired if you use an anchor.
While the div works it doesn't add anything semantically to the page. You are not defining a distinct chunk of the page you need to make an image clickable.
I don't use a button control enough to talk about that as an option.
Do not quite understand what you want to achieve. But have you tried image input?
<input type="image" src="image source">
It will do an operation similar to form submit.