el-input-number阻止外层button的冒泡

简介: el-input-number阻止外层button的冒泡

取法于上,仅得为中;取法于中,故为其下。一一李世民《帝范》

我这里有这样一个按钮

<el-button @click="randomChoose" type="success" size="small">
  选择<el-input-number controls-position="right"></el-input-number>个
</el-button>

效果如下

我们发现点击右边上下去增加减少中间个数的时候,也执行了我们上边按钮绑定的randomChoose 函数

但我们想要加上阻止冒泡却加不上

这里其实。。需要在外层再加上一个span或者div标签,再到这个span标签上加上阻止冒泡才可以生效

<el-button @click="randomChoose" type="success" size="small">
  选择
  <span @click.stop>
    <el-input-number controls-position="right"></el-input-number>
  </span>
</el-button>

这样我们点击上下小箭头的时候就不会触发上面el-button应该执行的函数啦!

相关文章
|
前端开发
layui select 绑定onchange事件失效
layui select 绑定onchange事件失效问题处理
|
2月前
|
JavaScript
VUE中el-input阻止冒泡防止触发父级事件
VUE中el-input阻止冒泡防止触发父级事件
|
6月前
element-plus 循环生成的多个input输入框如何校验
我们知道正常写出来的input输入框如何校验,那循环出来的输入框应该怎么校验咧,这里就教大家如何的去校验通过循环出来的输入框。
270 0
|
6月前
input type="button"和button的区别
input type="button"和button的区别
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
427 0
|
JavaScript 前端开发
Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox(多选)、checked(值的绑定)、select以及修饰符的使用
v-model的使用原理、结合radio、checkbox、checkbox(多选)、checked(值的绑定)、select以及修饰符的使用
173 0
|
JavaScript
解决input 有多少个radio绑定change事件,手动触发就会执行多少次问题
如题,相信大家都会遇到这个问题,那么为什么会触发多次呢?其实当你用jquery绑定onchange事件的时候你就无形中给每个radio绑定了事件,所以才会出现执行多少次的问题了,那么如何解决呢,其实这个问题就是最好的解决方法了,你想阿,一组radio当然只会选中一个,但是没有 选中的radio也会执...
1195 0