I have multiple defined as:
item A
and also I have a jquery script:
$(".item").click(function(){ itemclick(this); });
When a user positions the mouse between the items where the link is not active the itemclick() is executed without the link redirect.
How I can prevent this from happening?
Thanks
You don't show everything. It seems those links are inside other tags with class "item". So of course, if someone clicks outside a link but inside of that parent there won't be a "href" available to the function. There are several options, one would be to just not do anything if the clicked object is not a link <a ...>.
Give your links a class like:
<a class="link" href="col_c.php?id=1&field='A'" target="Frame3">item A</a>
and then use
$(".link").click(function(){ itemclick(this); });
I assume your .item is a div layer or a table row so it is also triggered around your link.
Simply execute the function only on the links themselves, not the whole parent (I expect your links are the children of something called .item).
$(".item a").click(function(){ itemclick(this); });
Related
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
I´ve got a main page with a menu (with links to my sub-sites) and a div (where my sub-sites will appear). This is my home.asp
Then I have a folder 'sub-site1' with 2 pages (A.asp and B.asp) that have links between them.
When I click 'sub-site1' at the menu, the A.asp page appears in my div. But if I click in the B link (inside A.asp) the B.asp will open in a blank page.
link to A.asp (in home.asp):
sub-site1
link to B.asp (in A.asp):
B
also try with
B
Could anyone please help me in this.
It is very normal because your B link is in A.asp and the A.asp doesn't contain a frame whose name is div_id. You can try to put the B link in home.asp or use the jQuery .load function as Pete said.
<a id="clickThis" href="javascript:void(0);" target="div_id">B</a>
use jquery.load now
$(document).ready(function(){
$("#clickThis").click(function(){
$("#div_id").load("B.jsp");//this will load B.jsp inside div_id
//**in case you want to pass parameters to B.jsp**
$("#div_id").load("B.jsp",function(){
param1:value,
param2:value2
});
});
});
I have a link which opens a table on the same page if user clicks on the link. What I want to know is that is there another way to link on the same page rather than doing this:
[Open Grid]
This is because in the url it displays # at the end of the url so I want to know is there another way to link on the same page than href="#".
Thanks
Why even use an <a> tag if you are just binding an event handler to the element. Just use a <span> and style it. You can even give it cursor:pointer if you want that link feel/look
just return false in javascript and the link will not be followed when clicked, but you can still open your tables using js, as i suspect you do right now
as I understand you alread have some function binded to the click event of this link, right? if so you can just use href="javascript:void(0)", this way is much better, because in this case browser doesn't add a context menu items such as "Open link in new tab" or "Copy link address" to this link.
If you're using Javascript to detect when an element is clicked, you don't have to use tha anchor tag, or the href attribute.
You could do <a id="showGrid">Open Grid</a> and then something like $('a#showGrid').click(...); if using jQuery. To get the "link cursor" you can do a {cursor: pointer} in CSS. It'll look the same, but you won't get that # in the browser's address bar.
when you click on a link that goes to same page where the link is, how to keep the view of the page?
By default it goes to the top of the same page.
Regards
Javier
One way to do it is to add # at the end of the href attribute on the links pointing to the current page, either manually or via javascript. I don't think it's a nice way to do it, though...
If you really need this, you could also "disable" the navigation for links pointing to the current page, so that clicking on a link to the current page would have no action...
Something like that should work in jQuery :
$('a.current').click(function(event){
//cancel default click action
event.preventDefault();
}
assuming that the links pointing to the current page have the CSS class current
Can you be more specific? What do you mean with "view of the page"?
Here is a general description of anchors:
If you have a link Link then you need an element on the same page with id="someTarget". When you then click on the link, that element will be scrolled to the top of the element.
EDIT:
Ahm, you are talking about a JavaScript link. In that case you need to have the Javascript retur false so that the default action (namely following the link) is ignored:
<a href="#" ... onClick="myJqueryFunction(); return false;">