I have a button with a span inside it that is set to run a function v-on:click. I try to pick up the value1 value attached to the button (naming convention aside) by catching it as an evt.
The problem I'm getting is if I click the side of the button it runs as expected. But if I click the span inside it, I can't pick up the value1 because the evt.target is the span.
I'm converting an existing project to Vue, and this isn't the behavior I expected. What is the best way to deal with this?
Thanks!
<button id="touch-button" class="button float-center" value1="19" v-on:click="emit_values">
<span>19</span>
</button>
emit_values(evt){
$(evt.target).attr("value1")
}
Apparently this is a generic html/javascript issue.
Solution is here: Missing click event for <span> inside <button> element on firefox
I've changed it to target evt.currentTarger, then used css to add the pointer-events: none; styling to all children of those buttons.
I have a custom component in angular that handles images. I have alt text as an input to the element and the screen reader picks it up to utter it out. But whenever I tab to the image, it says 'Trash' group. I want the screen reader to read it out as 'Trash' button. How can I achieve this? The following is my current implementation:
Icn component:
<img [ngClass]="class" [file]="file" [alt]="alt">
Usage:
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
I tried role="button" but that didn't work.
I don't know Angular so you may need to do some digging on how to structure this but your approach is making things difficult.
Instead make the button a <button>. This way you get all the native accessibility built in (e.g. accessible via tab by default, accepts focus, has hover and focus states etc.)and you will also get the correct announcements in screen readers.
Then place the icon inside the <button> and just style it appropriately.
<button> <!--add whatever directives angular requires here-->
<img [ngClass]="class" [file]="file" [alt]="alt">
</button>
Also you may consider using inline SVGs for your icons as they offer styling options and can change colour according to user preferences. It is also one less resource to download so will help with performance.
I figured out the solution to this problem by experimenting more with the roles.
The image tag doesn't take the role="button" as an attribute. Instead, the role needs to be assigned to the parent element of the image tag i.e., in my case the component icn like follows:
<icn class="del-icon" role="button" [file]="'trash'" [alt]="Trash"></icn>
Now, the screen reader software reads out as the 'Trash button' and gives further more instructions on how to interact with the button. And also if the above doesn't work, just by encapsulating the custom component in a span tag and assigning the role="button" to the span tag works like a charm.
<span class="del-btn-container" role="button">
<icn class="del-icon" [file]="'trash'" [alt]="Trash"></icn>
</span>
Note: Button role examples
I'm working within a React app and have a component that renders numerous span tags. The tags all have different class names and receive all their styling from the linked stylesheet. Except for one class, which is shown below as actions. For some reason, I cannot figure out how to update this one class via the stylesheet.
If I go into Chrome Dev tools and change the styling to the actions, the changes will render. If I create a customStyle object in the component and apply actions with a style attribute pointing to that object, the class will then style as expected.
However, if I add an ID to the actions span tag and try to style from the linked stylesheet, the issue comes back and none of my custom styling is applied to actions. I've tried removing all the styling for the actions class and only rendering a background-color of red, but even that won't take.
Is there some reason I may be missing that allows all other classes in this component to be styled via the stylesheet, but actions cannot?
Thanks in advance for any responses, and please let me know if there's any more additional info I can provide.
Below is component code:
import React from 'react';
const ListHeaderComponent = (props) => {
return (
<span className='header'>
<span className='subheader'}>
<span className='content'>
Hello
</span>
</span>
<span className='subcontent'>
This is where the content goes
</span>
<span className='actions' id="what">
This is where the actions go
</span>
</span>
);
};
export default SplitViewListHeader;
I have gone through the stylesheet thoroughly and the class is only referenced once. Below is a sample of code that won't take that I've tried with the class that doesn't update:
.actions {
background-color: red;
}
CSS scripts when pointed towards an element id is very particular about it. It will only point to that very element and have no effect on the nested sequence. That is why they are only used to point towards very specific elements that have standalone functions; or just use a name. I think that is the reason why id won't work.
What happens if you use class="" instead of className=""?
I have a span with an ng-click="..." attribute. The ng-click slightly modifies the span's CSS within the DOM so that it is more button-like. Within my application I wish to toggle whether or not that span is clickable or not. I can make the ng-click not do anything easy enough but what I would prefer is to just remove/disable the attribute altogether. This is to avoid all "buttonizing" that the ng-click does to the element. It would also be nice if the attribute were re-enabled if the clickable variable becomes true again.
I would like a solution that avoids using $scope.$watches because my application is pretty large and watches are slow.
Thanks!
I think you can have two spans with and without ng-click attribute and based on that clickable variable you control those two spans with ng-if or ng-show
Simple solution suggested by to Achu!
Just use two spans rather than toggle the attribute on a single span.
<span ng-if="clickable" ng-click="...">Click me!</span>
<span ng-if="!clickable">Cant click me!</span>
If I were in such a situation, I would not try to enable or disable ng-click attribute. Rather, I would use some flag variable with the $scope to see if click function should perform its functionality or not like in your controller you have a method like
$scope.spanClick = function(){
if(!$scope.shouldClick){
return;//simply do nothing
}
//Do button click logic
}
I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
I read somewhere that I need to put:
onmouseover="cursor: hand (a pointing hand)"
But it's not working for me.
Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
Or in a style sheet:
a.menu_links { cursor: pointer; }
You can do this in CSS:
a.menu_links {
cursor: pointer;
}
This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).
I like using this one if I only have one link on the page:
onMouseOver="this.style.cursor='pointer'"
in css write
a.menu_links:hover{ cursor:pointer}
Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:
url('assets/imgs/theGoods.png');
below is the code:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.
There may be nothing wrong with the inquirer's link. consider the following html:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.
the answer being sought for is this (which was posted by another):
<a id=test_link onclick="alert('Nice!');"
onmouseover="this.style.cursor='pointer';">Click ME!</a>
However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:
a.lendhand {
cursor: pointer;
}
then:
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.
jarett.
Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;
A
(Or make displayData() return false and ..="return displayData(..)
Solution via pure CSS
as mentioned in answer marked as the best
is not suitable for this situation.
The example in this topic does not have normal static href attribute,
it is calling of JS only, so it will not do anything without JS.
So it is good to switch on pointer with JS only.
So, solution
onMouseOver="this.style.cursor='pointer'"
as mentioned above (but I can not comment there) is the best one in this case.
(But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>
In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.
And if you use [cursor: default] it will show the usual arrow cursor that appears.
To know more about cursors and their appearance click the below link:
https://www.w3schools.com/cssref/pr_class_cursor.asp
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}
<div> im Pointer cursor </div>
<p> im Txst cursor </p>