画布子级上的 JQuery 侦听器不起作用
JQuery Listener on Canvas Child doesn't work
我有一个问题,我在画布上实现一个裁剪自定义矩形,我在 Javascript 中创建了一个函数,当裁剪函数被称为在现有画布上创建一个子级时,然后使用 JQuery 侦听器绘制矩形。子节点创建正确,而侦听器不工作,它们不获取事件。这是我的代码:
var dragging = false;
var xstart = 0;
var ystart = 0;
var width = 0;
var height = 0;
var ctxotmp = null;
var ctxtmp = null;
var canvastmp = null;
var mycanvas = null;
function draw() {
ctxtmp.fillRect(xstart, ystart, width, height);
}
function init() {
mycanvas = $('#mycanvas')[0];
// create temp canvas
canvastmp = document.createElement('canvas');
canvastmp.id = "mycanvastmp";
canvastmp.width = mycanvas.width;
canvastmp.height = mycanvas.height;
mycanvas.parentNode.appendChild(canvastmp);
$("#mycanvastmp").css({position:"absolute",top:$("#mycanvas").css("top"),left:$("#mycanvas").css("left")});
canvastmp = $('#mycanvastmp')[0];
ctxtmp = canvastmp.getContext('2d');
ctxtmp.lineWidth = 1;
ctxtmp.fillStyle = "rgba(0, 0, 0, 0.5)";
}
//listener
$('#mycanvastmp').mousedown(function(e) {
var xoffs = $(this).offset().left;
var yoffs = $(this).offset().top;
xstart = e.pageX - xoffs;
ystart = e.pageY - yoffs;
dragging = true;
});
$('#mycanvastmp').mousemove(function(e) {
if(dragging) {
var xoffs = $(this).offset().left;
var yoffs = $(this).offset().top;
width = e.pageX - xoffs - xstart;
height = e.pageY - yoffs - ystart;
ctxtmp.clearRect(0, 0, $(this).width(), $(this).height());
draw();
}
});
$('#mycanvastmp').mouseup(function() {
dragging=false;
alert('The rectangle for crop (x, y, width, height): ' + xstart + ', ' + ystart + ', ' + width + ', ' + height);
});
有人可以帮助我吗?
看起来您是在创建临时画布之前附加事件。将临时画布添加到 DOM 后,要么在 init()
函数中附加事件,要么使用 .delegate() 或 .on()
$("#mycanvas").on("mouseup", "#mycanvastmp", function() {
//...
});
您需要
在方法上使用.on
才能将事件绑定到动态创建的对象。当您的页面最初加载并且 dom 触发时,它看不到tempCanvas
因此最初不会附加它们。
//listener
$('body').on('mousedown' ,'#mycanvastmp', function(e) {
var xoffs = $(this).offset().left;
var yoffs = $(this).offset().top;
xstart = e.pageX - xoffs;
ystart = e.pageY - yoffs;
dragging = true;
});
$('body').on('mousemove' ,'#mycanvastmp', function(e) {
if(dragging) {
var xoffs = $(this).offset().left;
var yoffs = $(this).offset().top;
width = e.pageX - xoffs - xstart;
height = e.pageY - yoffs - ystart;
ctxtmp.clearRect(0, 0, $(this).width(), $(this).height());
draw();
}
});
$('body').on('mouseup' ,'#mycanvastmp', function(e) {
dragging=false;
alert('The rectangle for crop (x, y, width, height): ' + xstart + ', ' + ystart + ', ' + width + ', ' + height);
});
init();
现场演示
相关文章:
- jQuery将侦听器的大小调整为只触发宽度的变化
- 我应该/如何清除mousemove JQuery事件侦听器
- 在JQuery中使用谷歌地图Api事件/侦听器
- 如何使用我的Jquery代码创建委托事件侦听器
- jQuery事件侦听器多次启动
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器
- 延迟JQuery点击侦听器
- jQuery 事件侦听器
- 整合jQuery侦听器
- jQuery侦听器以获取服务器更新
- 画布子级上的 JQuery 侦听器不起作用
- 通过 jquery 侦听器将 html 表单链接到 javascript 函数时遇到问题
- 值更改 jQuery 侦听器
- Jquery 侦听器在隐身模式镶边中间歇性地工作
- 如何将 jQuery 侦听器添加到 CakePHP 时间输入中
- 用于单击类的 Jquery 侦听器,但在单击其中的图标时不起作用
- Jquery侦听器,用于更改元素id
- 使用append()移动对象后,jQuery侦听器目标似乎中断了
- jQuery侦听器排除子项
- 将jQuery侦听器应用于元素'的孩子