Question

（我是Flex / Actionscript世界的难民，我正在尝试切换到html5 / css3 / JS。如果这个问题是重复或太笨，请告诉我，我会删除它）

练习：制作一个＆＃34; app＆＃34;使用＆＃34;可点击的＆＃34;在单击事件上创建新元素的图像背景（而不是使用canvas）;

我已经获得了正常运行的结果 - 它只是在点击时添加了一个空的div - 但似乎我的工作方式太难了 - 连接并转换为字符串，达到css风格，我也不清楚我会怎么做：

将一些Javascript行为添加到新创建的元素中（例如，可以拖动这些元素）。我尝试将eventListener添加到新创建的元素中，但blockClicked函数永远不会被调用;
对新创建的元素进行点击，以便他们不会传递到后台，从而导致新项目堆叠在彼此之上
创建一个比空div更复杂的实例 - 就像一个html＆＃34;组件＆＃34; - 使用图像，标签等，而无需在JS中构建html字符串。

有没有更好或更清洁的方法来做这种事情？我一直在研究各种JS框架，但在我理解了一些基础知识（以及这些框架解决的问题）之前，我并不想跳进一些抽象的东西。

JS

"use strict";

var counter = 0;
var levelImg;
var eventContainer;

function setupBackground() {
    eventContainer = document.getElementById("event-container");
    levelImg = document.getElementById("levelImage");
    levelImg.addEventListener("click", addEventItem);
};

 function blockClicked(event){
    console.log("blockClicked");
}

function addEventItem(event) {
    console.log("create one");
    var rectArray = levelImg.getClientRects();
    var rect =  rectArray[0];
    var w = 40;
    var h = 80;
    // define x/y relative to edge of background image
    // and offset position so div appears centered at mouse click
    var xPos = (event.pageX - rect.left) - (w/2);
    var yPos = (event.pageY - rect.top) -(h/2);

    var divTmp = document.createElement("div");
    divTmp.className = "levelEvent";
    divTmp.id = "event" + counter++;
    divTmp.addEventListener("click", blockClicked, false);
    divTmp.style.width = w + 'px';
    divTmp.style.height = h + 'px';
    divTmp.style.left = xPos + 'px';
    divTmp.style.top = yPos + 'px';

    eventContainer.appendChild(divTmp);
}

CSS

.levelEvent {
    position: absolute;
    border: 1px solid green;
    background-color: palegreen;
    display:block;
    width: 100px;
    height: 100px;
    max-width: 120;
    max-height: 120;
}

#content-container{
    position: relative;
    border: 1px solid red;
    max-width: 1024px;
    margin: 0 auto;
}

#event-container{
    position: absolute;
    left: 0;
    top: 0;
    border: 4px solid blue;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    pointer-events:none;
}

HTML

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B</title>
    <link rel="stylesheet" href="css/styles.css">


</head>

<body onload="setupBackground()">
    <script src="js/clickToAdd.js"></script>
    <div id="content-container">
        <img id="levelImage" src="images/image3.png" width="100%" />

        <div id="event-container">
        </div>
    </div>
</body>
</html>

Answer 1

你肯定没有做错，虽然我发现了2个问题：

max-width: 120被忽略，因为px缺失
我敢打赌，代码的以下部分旨在以不同的方式工作。我想，当你向下滚动时，点击时绿色矩形仍然会出现在光标下面:(我在this jsfiddle中尝试过了）
```
var xPos = event.pageX - rect.left;
var yPos = event.pageY - rect.top;
```
我的建议：
```
var xPos = event.pageX;
var yPos = event.pageY;
```

点击添加div：我是＆＃34;做错了＆＃34;？

1 个答案: