相关疑难解决方法(0)

我的CODE

HTML:

<p id="console"></p>
<button>Click <span class="icon"></span>
</button>

JS:

$('.icon').click(function () {
    $('#console').html('Icon has been clicked');
    return false;
});

$('button').click(function () {
    $('#console').html('Button has been clicked');
});

CSS:

.icon {
    background-position: -96px 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings.png"); 
    background-repeat: no-repeat;
}

演示

问题

我能够点击.icon铬,但不能点击ff.当我点击.icon它时,它会点击整个button.

题:

我的代码不对吗？如果我的代码有效,那么解决这个问题的方法是什么.

我试过了什么

1. 我试过$('.icon').click()从控制台做,它在ff中工作得很好,所以我猜问题是span内部无法点击button.

2. e.preventDefault()并且e.stopPropagation也没有工作.

3. 我试过把它 放进去,span但它也没用.

我看到了很多关于此的问题，但没有一个能解决我的问题。

我拥有的：

Angular 11、Angular Material 8 和文件输入如下：

<div class="form-group">
    <input #myInput type="file" formControlName="fi"
                     id="fi" name="fi" (change)="postMethod($event.target.files)">
</div>

我需要的：

我需要自定义这个按钮的颜色、文本和大小。

我怎样才能定制它？