相关疑难解决方法(0)

什么是动态创建元素并能够移动它们的最佳方法？例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们.

我知道HTML5提供了三个可以实现这一目标的元素:svg,canvas和div.对于我想要做的事情,哪一个元素将提供最佳性能？

为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容.第一页中的小部件将完全使用canvas元素创建,第二个完全使用svg元素创建,第三个使用plain div元素HTML和CSS创建.

我试图将我网站上的图像更改img为svg,更改img标签embed和object标签.但是,实现onclick之前包含在img标签中的功能是最困难的.

我发现onclick放在object或embed标签内没有任何影响.

所以,我div专门为svg 做了一个,放在onclick这个div标签里.但是,除非访问者点击图像的边缘/填充,否则无效.

我已经阅读了有关覆盖a的内容div,但我正试图避免使用absolute定位或指定position.

有没有其他方法可以将onclick应用于svg？

有谁遇到过这个问题？欢迎提出问题和建议.

我正在其中一个事件中创建用户输入:

var throwConnectBox = function() {
    chat_box = document.getElementById('box');
    div = window.parent.document.createElement('div');
    input = window.parent.document.createElement('input');
    input.type = "submit";
    input.value = "Join chat";
    input.onclick = "conn.send('$connect\r\n');";
    div.appendChild(input);
    chat_box.appendChild(div);
}

...但结果输入没有onclick属性.我试着用

    input.onclick = conn.send('$connect\r\n');

......相反,但也没有工作.我究竟做错了什么？

我是Javascript的新手,我正在制作基于Web的项目(HTML).凭借我的基本知识,我设法创建了一个表单并在其上绘制了一个矩形.

我现在希望能够点击矩形,像按钮一样使用它,但我似乎无法找到任何可以帮助我的教程或答案.

这是我的矩形的代码:

function Playbutton(top, left, width, height, lWidth, fillColor, lineColor) {
    context.beginPath();
    context.rect(250, 350, 200, 100); 
    context.fillStyle = '#FFFFFF'; 
    context.fillStyle = 'rgba(225,225,225,0.5)';
    context.fillRect(25,72,32,32);
    context.fill(); 
    context.lineWidth = 2;
    context.strokeStyle = '#000000'; 
    context.stroke();
    context.closePath();
    context.font = '40pt Kremlin Pro Web';
    context.fillStyle = '#000000';
    context.fillText('Start', 345, 415);
  }

我知道你需要找到x,y坐标和鼠标位置才能点击矩形区域.但我现在真的陷入困境.它可能非常简单和逻辑,但我们都必须经历这个阶段.

我只是在画布上绘制rect的画布代码

var x=document.getElementById("canvas");
var ctx=x.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

可以在所说的rect上添加eventListener吗？例如,如果我点击rect,它将变为红色.

我试图捕获每次鼠标单击画布时的screenX和值，因此我使用了，但我有点困惑的是：screenYaddEventListener

canvas = document.getElementById('theCanvas');
ctx = canvas.getContext('2d');

window.addEventListener("click",function(event){
  console.log(event)
});

在我找到 clientX 和 clientY 值后，该值指示我的鼠标在控制台屏幕上的 x/y 位置。当我尝试用任何其他单词或变量替换事件参数时，我有点困惑，它仍然在控制台中执行相同的输出，就像：

window.addEventListener("click",function(b){
  console.log(b)
});

我很好奇的是，无论我在这里向 function() 传递什么参数，它总是返回窗口对象上的所有内容吗？我已阅读https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener上的文章，但它没有涵盖这一点。那么我的好奇心可以得到帮助吗？

我正在创建一个动态菜单,我可以在其中添加和删除新表单.

<input type="button" value="generate form" id="test"/>
<div id="form1"></div>

<script>
$(document).ready(function() {
    $("#test").click(function() {    
        $("#form1").append("<select id='score-attempt'><option value='penalty'>penalty</option></select><input type='button' value='remove' id='remove'/><br>");
    }); 

    $("#form1 #remove").click(function() {    
        alert($(this).index());
    });
});

问题是单击删除永远不会触发警告框.

谢谢