كيفية إضافة معالج javaScript Onclick إلى كائن HTML مضمن؟

Question

أحاول إضافة معالج onclick إلى كائن مضمن. يحتاج المعالج إلى تنفيذ وظيفة موجودة في ملف .js خارجي مرتبط بملف HTML الحالي عبر <script src="....

هل أحتاج إلى الرجوع إلى الوظيفة بشكل مختلف بسبب وجودها في مكان آخر؟

فيما يلي الرمز كما هو الحال حاليًا (والذي لا يعمل ، ولكنه لا ينتج أيضًا أي أخطاء):

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onClick="buttonEvent('buttonClicked')"/>

Answer 1

عليك تنفيذ onclick داخل SVG وربطها بوظيفة JavaScript الخارجية باستخدام JavaScript داخل SVG. انظر SVG wiki للحصول على أمثلة.

تحديث: يبدو أن Wiki SVG لم يعد. ليس من المستغرب أن تكون أفضل المراجع التي يمكنني العثور عليها الآن (بسرعة) هي على Stackoverflow نفسها.

تصف هذه الإجابة كيفية تنفيذ onclick داخل SVG.

Answer 2

استخدم إما JavaScript Binding (ماريو مينجر أجاب ذلك بالفعل).

إذا لم تتمكن أو لا تستخدم الربط ، فيمكنك استخدام ما xil3 أجاب مع تعديل واحد:

استخدم علامة مرساة فارغة <a href="javascript:someFunc()"></a> كمستهلك النقر. قم بتعيين z-index وموقف/حجم بحيث يتم وضعه على كائن SVG (لتوافق المتصفح المتقاطع).

Answer 3

يجب أن يكون Onclick كل الأحرف الصغيرة.

<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53" 
type="image/svg+xml" onclick="alert('hello!');"/>