mousedown mousemove mouseup 与 click事件冲突的解决办法

使用css样式pointer-events解决

需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup,而且它们的执行顺序也是

mousedown > mousemove > mouseup > click
先说一下我的场景:我在做一个拖拽方法,但是我不希望在拖拽的时候触发容器内部的click事件。

理一下思路

要实现拖拽方法需要 mousedown + mousemove + mouseup
click事件需要 mousedown + mouseup

那么只要想个办法阻止mousedown 和 mouseup 同时发生,就能阻止click事件,看到拖拽方法中多的一个mousemove事件,显而易见的只能是在这上面找找办法了。

解决办法

pointer-events属性可以阻止设置了该样式的容器的鼠标事件的触发,也就是说设置了该属性,这个容器就无法点击了,并且这个容器内部的任何点击行为都无法触发,但是如果容器内部的元素也设置了该属性的其他值,则可以继续触发。利用该属性,可以达到组织事件穿透的效果。

我在mousemove的监听事件中加入了这行代码,此时,在我开始拖动的时候,对于click事件来说,原先的mousedown事件就丢失了,因此click事件不满足触发条件,无法执行

// el指的是dom元素,你要阻止事件穿透的容器
el.style.pointerEvents = 'none'

然后我在mouseup的监听事件中将值取消,来恢复el这个容器的点击行为

el.style.pointerEvents = null

不该在 mousedown 中设置该属性,否则按钮的click事件就无法执行了,就像前面说的,click事件的执行需要mousedown + mouseup,毕竟拖动事件和容器内部的点击事件都是要先进行mousedown才能继续往下走的。

参考文章

div阻止点击穿透+实现点击穿透

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
这里提供一个简单的实现工具栏画矩形、画多边形和画椭圆的 C# 代码示例,你可以参考并根据自己的需求进行修改。 首先,我们需要在 Windows 窗体中添加一个工具栏控件,然后在工具栏中添加三个按钮,分别对应画矩形、画多边形和画椭圆的功能。代码如下: ```csharp private void Form1_Load(object sender, EventArgs e) { // 添加工具栏控件 ToolStrip toolStrip = new ToolStrip(); this.Controls.Add(toolStrip); // 添加“画矩形”按钮 ToolStripButton btnRect = new ToolStripButton(); btnRect.Text = "画矩形"; btnRect.Click += new EventHandler(btnRect_Click); toolStrip.Items.Add(btnRect); // 添加“画多边形”按钮 ToolStripButton btnPolygon = new ToolStripButton(); btnPolygon.Text = "画多边形"; btnPolygon.Click += new EventHandler(btnPolygon_Click); toolStrip.Items.Add(btnPolygon); // 添加“画椭圆”按钮 ToolStripButton btnEllipse = new ToolStripButton(); btnEllipse.Text = "画椭圆"; btnEllipse.Click += new EventHandler(btnEllipse_Click); toolStrip.Items.Add(btnEllipse); } ``` 接着,我们需要在窗体中添加一个画板控件,用于显示绘制的图形。代码如下: ```csharp private Bitmap bitmap; // 用于绘制的位图 private Graphics graphics; // 用于绘制的图形对象 private void Form1_Load(object sender, EventArgs e) { // ... // 添加画板控件 PictureBox pictureBox = new PictureBox(); pictureBox.Dock = DockStyle.Fill; pictureBox.BackColor = Color.White; pictureBox.MouseDown += new MouseEventHandler(pictureBox_MouseDown); pictureBox.MouseMove += new MouseEventHandler(pictureBox_MouseMove); pictureBox.MouseUp += new MouseEventHandler(pictureBox_MouseUp); this.Controls.Add(pictureBox); // 创建位图和图形对象 bitmap = new Bitmap(pictureBox.ClientSize.Width, pictureBox.ClientSize.Height); graphics = Graphics.FromImage(bitmap); } ``` 然后,我们需要实现三个按钮的点击事件,以及画板控件的鼠标事件。代码如下: ```csharp private bool isDrawing = false; // 是否正在绘制 private Point startPt; // 绘制起点 private Point endPt; // 绘制终点 private List<Point> polygonPts = new List<Point>(); // 多边形的各个顶点坐标 private void btnRect_Click(object sender, EventArgs e) { // 点击“画矩形”按钮 isDrawing = true; } private void btnPolygon_Click(object sender, EventArgs e) { // 点击“画多边形”按钮 isDrawing = true; } private void btnEllipse_Click(object sender, EventArgs e) { // 点击“画椭圆”按钮 isDrawing = true; } private void pictureBox_MouseDown(object sender, MouseEventArgs e) { if (isDrawing) { // 记录绘制起点 startPt = e.Location; } } private void pictureBox_MouseMove(object sender, MouseEventArgs e) { if (isDrawing) { // 绘制中,记录绘制终点并重新绘制图形 endPt = e.Location; DrawShape(); } } private void pictureBox_MouseUp(object sender, MouseEventArgs e) { if (isDrawing) { // 绘制结束,记录绘制终点并重新绘制图形 endPt = e.Location; DrawShape(); // 清除绘制状态和多边形顶点坐标 isDrawing = false; polygonPts.Clear(); } } private void DrawShape() { // 先清空画板 graphics.Clear(Color.White); if (btnRect.Checked) { // 绘制矩形 Rectangle rect = new Rectangle(startPt, new Size(endPt.X - startPt.X, endPt.Y - startPt.Y)); graphics.DrawRectangle(Pens.Black, rect); } else if (btnPolygon.Checked) { // 绘制多边形 polygonPts.Add(endPt); if (polygonPts.Count > 1) { graphics.DrawPolygon(Pens.Black, polygonPts.ToArray()); } } else if (btnEllipse.Checked) { // 绘制椭圆 Rectangle rect = new Rectangle(startPt, new Size(endPt.X - startPt.X, endPt.Y - startPt.Y)); graphics.DrawEllipse(Pens.Black, rect); } // 在画板上显示绘制的图形 PictureBox pictureBox = (PictureBox)this.Controls[1]; pictureBox.Image = bitmap; } ``` 最后,我们需要在窗体关闭时释放资源。代码如下: ```csharp private void Form1_FormClosing(object sender, FormClosingEventArgs e) { // 释放资源 graphics.Dispose(); bitmap.Dispose(); } ``` 至此,一个简单的工具栏画矩形、画多边形和画椭圆的 C# 实现就完成了。需要注意的是,这里只提供了一个基础的实现,如果需要更复杂的功能,还需要进一步完善代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值