2009-10-07 63 views
13

Tôi có thẻ canvas để tạo hình ảnh. Tại mỗi phần trong dòng của tôi, tôi có một "dấu chấm" để bật tính năng 'di chuột' và hiển thị chi tiết hơn.addEventListener trong thẻ Canvas

Mọi thứ hoạt động tốt khi tôi không thêm trình xử lý sự kiện vào chấm này.

Firebug cảnh báo tôi: s.addEventListener không phải là chức năng ...

Có thể tạo trình xử lý sự kiện động không? (Tôi mới sử dụng Javascript)

+0

Một số mã sẽ giúp chúng tôi ... –

Trả lời

25

Bạn không thể đính kèm sự kiện DOM vào những thứ khác ngoài đối tượng DOM (phần tử). Các canvas là một yếu tố DOM, những điều bạn đang vẽ cho vải không phải là. Chúng trở thành một phần của canvas làm pixel của một img.

Để phát hiện nhấp chuột vào một điểm cụ thể trên canvas của bạn, bạn phải đính kèm sự kiện nhấp chuột trên phần tử canvas và sau đó so sánh tọa độ x/y của sự kiện nhấp chuột với tọa độ của canvas.

này được trả lời trong: "How do I get the coordinates of a mouse click on a canvas element?"

+0

Cảm ơn bạn rất nhiều. Tôi quan tâm nhiều hơn đến việc tạo canvas khác trong canvas để thêm trình xử lý sự kiện vào chúng nhưng chúng không hiển thị (có thể chúng nằm phía sau khung chính). Dù sao bây giờ tôi đang tìm cách phát hiện sự kiện so sánh với vị trí của chuột. Cảm ơn lần nữa :-) – kadiks

+0

Sử dụng [Easel js framework] (http://easeljs.com) điều này giúp đơn giản hóa việc thêm tương tác chuột vào các hình dạng được vẽ – Neil

4

Nếu bạn đang gonna được vẽ cấu trúc cơ bản, tôi đề nghị bạn sử dụng svg inline.

Trong trường hợp này, tất cả các phần tử svg trở thành các phần tử DOM và bạn có thể đính kèm các sự kiện riêng biệt vào từng phần tử.

Các vấn đề liên quan