首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当列在Mat-Table中有href/click事件时,如何防止行扩展?

当列在Mat-Table中有href/click事件时,如何防止行扩展?

在Mat-Table中,如果某一列包含了href或click事件,点击该列时会触发事件并导致行扩展。如果想要防止行扩展,可以通过以下两种方法实现:

  1. 使用stopPropagation()方法:在触发事件的函数中,使用event.stopPropagation()方法来阻止事件冒泡。这样点击该列时,事件将不会传递给父元素,从而防止行扩展。示例代码如下:
代码语言:txt
复制
<mat-table>
  <ng-container matColumnDef="columnWithEvent">
    <mat-header-cell *matHeaderCellDef> Column with Event </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="handleClick($event)">
      <a href="#" (click)="handleLinkClick($event)">{{element.columnWithEvent}}</a>
    </mat-cell>
  </ng-container>
</mat-table>

...

handleLinkClick(event: Event) {
  event.stopPropagation();
  // 处理链接点击事件
}

handleClick(event: Event) {
  event.stopPropagation();
  // 处理其他点击事件
}
  1. 使用CSS样式控制:通过CSS样式来控制该列的鼠标样式,使其不具备点击链接的样式,从而防止行扩展。示例代码如下:
代码语言:txt
复制
.mat-cell.columnWithEvent {
  cursor: default;
}

以上两种方法都可以有效地防止行扩展,具体选择哪种方法取决于具体需求和实现方式。

希望以上回答能够满足您的需求,如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery EasyUI 详解

function () { $(document.body).layout('expand', 'east'); }); 布局的事件 事件名 参数 描述 onCollapse region 折叠区域的时候触发...onExpand region 展开区域的时候触发 onAdd region 添加区域的时候触发 onRemove region 移除区域的时候触发 // 注册监听事件 $(document.body...null fitColumns boolean True 就会自动扩大或缩小的尺寸以适应表格的宽度并且防止水平滚动。 false striped boolean True 就把条纹化。...[10,20,30,40,50] queryParams object 请求远程数据,发送的额外参数。 {} sortName string 定义可以排序的。...事件事件扩展自 panel,下列是为 datagrid 增加的事件。 名称 参数 说明 onLoadSuccess data 数据加载成功触发。

9.1K10

ABP入门系列(14)——应用BootstrapTable表格插件

数据绑定 数据绑定包括以下三个部分: url:就是用来指定请求后台的URL; uniqueid:用来绑定每一的唯一标识,一般为主键 columns:用来绑定每一要显示的数据。...用来指定如何进行格式化输出,如操作中指定formatter: operateFormatter,用来显示统一格式的操作组; //指定操作组 function operateFormatter...,比如操作中指定events: operateEvents来指定每个操作对应的事件处理: //指定table表体操作事件 window.operateEvents = {...工具栏事件绑定 工具栏是我们List.cshtml定义的新增、编辑、删除三个按钮,表格初始化时,直接为toolbar参数指定工具栏对应的id即可,如本例toolba: '#toolbar'。...总结 本文主要讲解了如何使用bootstrap table进行后台分页的一般用法,讲解了bootstrap table参数的配置和几个注意事项。其中有很多功能并未讲到,具体请自行查询文档。

4.4K50

Web前端知识系列(包括web前端全部知识点)

的表格 1.第一 放logo 嵌套一个13的表格 2.第2 放菜单 3.第3 放图片 4.第4 热门商品 嵌套一个27的表格 5.第5 放广告图片 6.第6 最新商品...嵌套一个27的表格 7.第7 放一个图片 8.第8 两个段落 代码: <!...2.103表格 3.表格中添加表单表单子标签 1.5.7.基础标签7 1.5.7.1.框架标签 frameset框架级 常见的子标签: Frame 常用属性: cols:垂直切割...鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...4.2.0.1.事件介绍 鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 浏览器窗口滚动事件 $(window).scroll

2.2K10

Bootstrap快速入门

('click.bjock', 'td', function(event){});//这儿增加了参数'td',而且选择器变成了document, //好处是document上绑定了一个单击事件,利用冒泡机制...事件命名空间:可以看到上例中的事件click.bjork,bjork被称命名空间,需要触发自己的时间,命名空间就变得很有用,比如$('#first').trigger('click.bjork');...使用行在水平方向上创建一组 具体内容放在中,只有可以作为的直接子元素 接下来看一下.container样式的源码,可以看出其核心就是.container和@media的设置 .container...,内部嵌套的row宽度为100%,就是当前外部的宽度。...补充知识 实际应用汇总,bootstrap提供的组件基本满足了一般项目的需求,但比如分页控件的支持就显得比较弱,这时需要选用网上现有的插件,也可以自己编写相关扩展

4.1K61

最新jquery+easyui_api培训文档

事件名 参数 描述 onLoadSuccess none 远程数据成功加载触发 onLoadError none 远程数据加载失败触发 onSelect record 当用户选择了一个列表项触发...href 字符串 一个远程的URL加载数据,然后显示面板中 null loadingMessage 字符串 加载远程数据面板中显示的信息 Loading… 10.3 事件 名字 参数 描述...forceDestroy forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数 refresh none 设置了href,刷新面板来加载远程数据...100 scrollDuration 数字 每次滚动持续的毫秒数 400 11.3 事件 事件名 参数 描述 onLoad arguments 一个AJAX标签加载远程数据完成被触发,参数和jQuery.ajax...,发送的额外的参数 {} sortName 字符串 定义哪一可以排序 null sortOrder 字符串 定义排序的方式,递增(asc)或递减(desc) asc editors 对象 定义编辑某行数据的编辑器

3.2K40

点击块,让小块动起来 - 函数封装

; 页面事件 1 load - 页面完全加载后(包括所有图像、JavaScript文件、CSS文件等外部资源),就会触发window上面的load事件; 2 unload - 文档被完全卸载后触发。...1 blur - 当前元素失去焦点触发的事件; 2 change - 当前元素失去焦点并且元素的内容发生改变而触发的事件; 3 focus - 某个元素获得焦点触发的事件; 4 input - 当用户输入时触发...; 5 reset - 事件会在表单中的重置按钮被点击发生; 2.3 给标签绑定事件 了解完了JS的事件类型,那我们在网页中该如何使用这些事件类型呢?...代码28我们获取了网页中id名为btnEle的标签; 2 代码32~34通过标签对象.on事件类型 = function() {}的方式给标签绑定上click事件类型; 3 代码33事件处理程序代码...btnObj1或btnObj2命名click事件里面的代码不用发生改动,因为this指向的还是标签的对象,这样做有利于代码的扩展性; 5 课程小结 本文主要按照一个技术角度的思路来讲解简单页面交互效果的实现

1.6K120

第86节:Java中的JQuery基础

jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以多种浏览器中工作。...事件,ready(fn) dom载入就绪就可以查询及操纵绑定的一个要执行的函数,这是事件模块中最重要的一个函数,因为它可以提高web应用程序的响应速度。...click([[data],fn]) 触发每一个匹配的click事件,这个函数会调用执行绑定到click事件的所有函数。...fn,每个匹配元素的click世界中绑定的处理函数 [data],fn $("p").click(); // 所有段落点击隐藏 $("p").click( function(){ $(this).hide...") 所有带有以 ".jpg" 结尾的 href 属性的属性 事件 jquery事件处理函数是jquery中和核心函数。

2.9K30

WPF是什么_wpf documentviewer

GridView中定义与样式化 定义数据字段GridViewColumn中显示,使用DisplayMemberBinding、CellTemplate或CellTemplateSelector...你还可以定义用户单击标题响应的事件处理程序。事件处理程序可以执行类似于根据内容对显示GridView中的数据进行排序的操作。...下面列表详细讨论了使用GridView进行用户交互的功能: 通过拖放对重新排序 光标位于表头上,用户可以按下鼠标左键,然后将该拖动到新位置,从而对GridView的进行重新排序。...通过单击标题按钮与交互 当用户单击标题按钮,如果你提供了排序算法,则可以对中显示的数据进行排序。 你可以自定义标题按钮的Click事件,以便提供排序算法之类的功能。...若要为单个列表头处理Click事件,需GridViewColumnHeader上设置事件处理程序。若要为所有列表头设置处理Click事件事件处理程序,可在ListView控件上设置该处理程序。

4.7K20

ES6 手写一个“辨色”小游戏

项目结构 index.html index.css index.js 本文主要讲述如何使用 js 实现功能,html css 不在此范围。直接上代码。 <!...上述代码中游戏结束显示用户得分,并且使其点击可以重新开始游戏,addEvent() 为兼容 ie 的事件监听方法,代码如下: // 事件兼容方法 function addEvent(element,...首先,矩阵必须要有最多的数限制,太小不好操作,显示也不好看。...嗯,细心的你可能会发现,此游戏 ie 中行不通,ie 不兼容 es6 语法。怎么办? 4. 兼容与拓展 为了兼容 ie , 我们需要把 es6 语法转化为 es5, 使用 babel 编译即可。...libraryExport: "default", libraryTarget: 'umd', filename: 'colorGame.js', }, }; index.js 文件最后一添加

92610

jQuery Cheat—Sheet(jQuery学习笔记)

点击事件 点击元素是,会发生 click 事件。...在下面的实例中,点击事件某个 元素上触发,隐藏当前的元素: $("p").click(function(){ $(this).hide(); }); 双击事件 双击元素,会发生...在下面的实例中,双击事件某个 元素上触发,隐藏当前的元素: $("p").dblclick(function(){ $(this).hide(); }); 鼠标穿过事件 当鼠标指针穿过元素...; }); 获得焦点事件 元素获得焦点,发生 focus 事件通过鼠标点击选中元素或通过 tab 键定位到元素,该元素就会获得焦点。...下面的例子演示如何获得链接中 href 属性的值: $(“button”).click(function(){ alert($(“#derwer”).attr(“href”)); //警告框弹出

16.2K30
领券