Is it possible to have a routerLink in a div that contains another div with a routerLink?
<div [routerLink]="xy">
<span [routerLink]="yx">clickable Link</span>
</div>
The problem is, that it first redirects you to the first routerLink in the div and then to the routerLink in the span, if you click the text in the span. It should only redirect to the span's link. I already tried to add to the span, but without success:
(click)="stop($event)"
stop(event: Event) {
event.stopPropagation();
}
You must have some content/width/height in order to make the div & span clickable
<div routerLink="/one">
one
<span routerLink="/two" (click)="stop($event)">two</span>
</div>
In the component.ts file
stop(e: Event) {
e.stopPropagation();
}
Related
i have some <div></div> elements with draggable="true" attribute but same thing gets applied on child elements,but i dont want to apply it on child elements, So how do i prevent this default behavior?
code :
<div draggable="true" ondragstart="play(event)" ondrop="pause(event)" id="move">
<span id="text">
drag me
</span>
</div>
as i used dragable="true" on <div> so span also gets the same property.
I was having a similar event with a sortable drag-and-drop "list" I created. Each "row" of the list looks like this.
<div class='row' draggable='true'>
<div class='drag-handle' ></div>
<img class='icon-image' draggable='false'>
<input type='text' name='demo' >
<button class='remove-btn' onclick='removeItem(this,event)'>Remove</button>
</div>
When I tried selecting the text inside of the "input" element, somehow I would start dragging the whole "row". As frustrating as this was, the best solution I found was to simply apply the draggable='true' property to the item with the class="drag-handle" which would be my dragging icon that would fire the ondragstart(e) event.
The rest can be handled in JS
In JS, reference the parent element "row" by using the closest(".row") method
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.drag-handle').forEach(handle => {
handle.addEventListener("dragstart", dragStart)
handle.addEventListener("drag", dragging)
handle.addEventListener("dragend", dragEnd)
})
function dragStart(e) {
document.querySelectorAll(".row").forEach(row=>{
row.addEventListener("dragover", dragOver)
})
var target_row = e.target.closest(".row")
target_row.classList.add("dragging")
}
Note:
I added a class of "dragging" to the one "row" that was going to be dragged so I could do a querySelectorAll('.row:not(.dragging)') for other operations, classes, etc, however, this is NOT required for the intended purpose to work. Just a bit more context that hope helps your problem.
I have a simple button with a span inside it with some boostrap icon as its class.
Nothing serious.
<button ng-click="ctrl.toggleMenuDropDown()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
The problem is that the span part does not register the click. When I click on the rendered button where the icon is, the click is not registered. And I don't know why, or what might be causing that.
But when I add stop propagation to the button it all works fine. Like so:
<button ng-click="ctrl.toggleMenuDropDown(); $event.stopPropagation()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
It works fine. Why is that?
It's very hard to know why you are using a span inside a button element but clarifying your question:
You need to add ng-click on the span element also. If you want only the span ng-click to work you need to add event.stopPropagation() to your toggleMenuDropDown(event) function passing event to this function.
The definition of event.stopPropagation is:
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed. Tip: Use the event.isPropagationStopped() method to check
whether this method was called for the event.
$("#but").click(function(event){
event.stopPropagation();
});
$("#foo").click(function(){
alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">button
<span id="but">
<span></button>
Try this...Added z-index to my span and it worked out
.reorder{
.fa {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I've got a contenteditable span placed inside an <a> tag. I'd like to be able to edit the text inside the span so it is important to:
place the cursor on mouseclick somewhere inside the span
select part of the text inside the span using the mouse
Both does not work in Firefox as soon as there is a href attribute in the hyperlink (which is also needed in my case). There is no problem without this attribute and there are no problems in Chrome.
Please try my example on JSFiddle.
<ul>
<li>
<a href="#">
<span contenteditable="true">PlacingCursorOrTextSelectionInFirefoxImpossible</span>
</a>
</li>
<li>
<a>
<span contenteditable="true">noProblemsHereSoFar</span>
</a>
</li>
</ul>
What you can do to improve the click behaviour is to prevent its propagation like this:
<a href="#">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
Unfortunately, this only allows to put the cursor inside the span, but it is somewhy put to its beginning, not where one have clicked.
To enable selecting, you need to prevent the dragging behaviour, but it is to be changed for the a element:
<a href="#" draggable="false">
<span contenteditable="true" onclick="event.stopPropagation();">
PlacingCursorOrTextSelectionInFirefoxImpossible
</span>
</a>
But wow, draggable="false" actually fixed the "cursor to beginning" bug! Here's the working example (tested in FF 47): https://jsfiddle.net/8v1ebkfd/4/
This works for me:
prevent click-default inside contenteditables
and for firefox, remove and add href-attribute to prevent placing the cursor at the start of the contenteditable-element
http://jsfiddle.net/uy4q0zcm/1/
// if contenteditable inside a link
document.addEventListener('click', e=>{
if (e.button !== 0) return;
if (e.target.isContentEditable) {
e.preventDefault();
}
if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
e.preventDefault();
}
});
// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
if (!e.target.isContentEditable) return;
var link = e.target.closest('a');
if (link) {
const href = link.getAttribute('href')
link.removeAttribute('href');
setTimeout(()=>link.setAttribute('href', href))
}
});
I have 8 hidden sections with display:none; on my site that are triggered with jQuery to show when a select id is selected. When i try to start building the structure inside the hidden element #Restaurant (like this)
<div id="common">
<div id="Restaurant" class="common_reveal">
<div class="common_title">test</div>
</div>
</div>
It doesn't work. However, if i just insert plain text or <span>, it does...
Is there a reason for why it wont display additional <div>'s within the hidden element?
JS
$('#business_type').change(function(){
$("#common div").each(function() {
$(this).attr("style", "display: none;");
})
$("#" + $(this).val()).attr("style", "display: block;");
})
CSS
#common {
}
.common_reveal {display: none;}
You are picking all divs inside your #common element, try this:
$("#common >div").each(...)
I have a structure like this:
<ul id="container">
<li>
<div tabindex="1" class="selectThis">
<div>
<div>
<span class="textToEdit" contenteditable="true"></span>
</div>
</div>
</div>
</li>
<ul>
Where it works to bind an event to the contenteditable span:
$("#container").on("keydown", ".textToEdit", function (e) {
alert("yes");
});
But the div itself doesn't react:
$("#container").on("keydown", ".selectThis", function () {
alert("no");
});
Using .on because the whole thing is dynamically generated, besides the container. I'm using jquery UI's sortable on said container. What is wrong with the binding? I've tried giving the ul and li a tabindex too, but the div still won't give me an alert.
The problem was that the div wasn't being focused after sortable is called on the ul--manually calling $(".selectThis").focus() makes it work. Thanks to Pilgerstorfer Franz for making me aware of this!