javascript - 管理两个事件监听器的结果

Question

我试图取回下拉列表中的选定值并将其归因于 atom.name 以更改原子名称。默认情况下有 ch2 分子，当单击 Na 时。 Ch2 应该用 Na 代替，但问题是事件监听器的范围和管理这两个事件监听器的能力。管理下拉结果的人

var a = document.getElementById('atomDropdown');
a.addEventListener('change', function() {
  console.log(this.value);
}, false);

console.log 给出了正确的结果并且管理下拉菜单位置的事件监听器

document.body.addEventListener('mouseup', e => {
    let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
    atomDropdown.classList.remove('hidden')
    if(atom){
       atomDropdown.style.left = atom.position.x + 'px'
       atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
    }
    console.log(atom.name);
})

我试图做的但没有成功的是将 atom.name 赋予这个值。

const canvas = document.createElement('canvas'),
	 context = canvas.getContext('2d'),
	 width = canvas.width = window.innerWidth,
	 height = canvas.height = window.innerHeight,
	 atoms = [],
	 bonds = [],
	 atomDropdown = document.getElementById('atomDropdown')

document.body.appendChild(canvas)

class Atom {
	constructor({ x, y, name }){
		this.position = {}
		this.position.x = x
		this.position.y = y
		this.name = name
		this.r = name.length * 10

		atoms.push(this)
	}

	draw(){
		let { position, name, r } = this,
		    { x, y } = position

		context.fillStyle = '#EEEEEE'
		context.beginPath()
		context.arc(x, y, r, 0, 2 * Math.PI)
		context.fill()


		context.fillStyle = '#000000'
		context.font = '20px sans-serif'
		context.textAlign = 'center'
		context.fillText(name, x, y + 5)
	}
}

class Bond {
	constructor({ atom1, atom2, type }){
		this.atom1 = atom1
		this.atom2 = atom2
		
		bonds.push(this)
	}
	
	draw(){
		let { atom1, atom2 } = this
		
		context.beginPath()
		context.strokeStyle = '#000000'
		context.moveTo(atom1.position.x, atom1.position.y)
		context.lineTo(atom2.position.x, atom2.position.y)
		context.stroke()
	}
}

let hexagon = {
	size: 100,
	x: width/2,
	y: height/2
}

let lastAtom

for (var side = 0; side < 7; side++) {
	let newAtom = new Atom({
		x: hexagon.x + hexagon.size * Math.cos(side * 2 * Math.PI / 6),
		y: hexagon.y + hexagon.size * Math.sin(side * 2 * Math.PI / 6),
		name: 'CH2'
	})
	
	if(lastAtom) new Bond({ atom1: lastAtom, atom2: newAtom })
	if(side == 6) new Bond({ atom1: newAtom, atom2: atoms[0] })
	lastAtom = newAtom
}

function render(){
	context.fillStyle = '#FFFFFF'
	context.fillRect(0,0,width,height)

	bonds.map(b => b.draw())
	atoms.map(a => a.draw())
}

render()

function distance(p1, p2){
	return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2))
}
var a = document.getElementById('atomDropdown');
a.addEventListener('change', function() {
  console.log(this.value);
}, false);

document.body.addEventListener('mouseup', e => {
	let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
	atomDropdown.classList.remove('hidden')
	if(atom){
	   atomDropdown.style.left = atom.position.x + 'px'
	   atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
	}
	console.log(atom.name);
})

#atomDropdown {
	position: absolute;
	
	&.hidden {
		display: none;
	}
}

<select id="atomDropdown" class="hidden">
	<option>Test1</option>
	<option>Test2</option>
	<option>Test3</option>
</select>

Answer 1

似乎期望的行为是更改被单击原子的 atom.name 的值，将其替换为下拉菜单中的名称。

例如，点击一个 CH2 原子 -> 从下拉菜单中选择“Test1” -> 你点击的原子的 this.name 的值从“CH2”变为“Test1”。

如果是这种情况，问题就是如何在 atomDropdown 的“更改”处理程序中将上一个“mouseup”事件定位到同一个原子。在这种情况下，您可以在定义中添加一个新变量:

const canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
atoms = [],
bonds = [],
atomDropdown = document.getElementById('atomDropdown')

var selectedAtom = null

将 selectedAtom 设置为“mouseup”处理程序中的原子实例:

document.body.addEventListener('mouseup', e => {
let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
atomDropdown.classList.remove('hidden')
if(atom){
   selectedAtom = atom
   atomDropdown.style.left = atom.position.x + 'px'
   atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
}
console.log(atom.name);

})

并在“更改事件”中更新 selectedAtom.name:

var a = document.getElementById('atomDropdown');
a.addEventListener('change', function() {
  if (selectedAtom) {
    selectedAtom.name = this.value;
    render(); //added so that the GUI updates when the name value changes
  }
  console.log(this.value);
}, false);

编辑: 要立即更新出现在 GUI/显示中的原子名称，您还必须在 atomDropDown 的“更改”事件中更改 selectedAtom.name 后调用 render()。