如何将多个 onClick 事件链接到 HTML 中的一个元素？我可以让他们改变href吗？

Posted 2023-03-05

【中文标题】如何将多个 onClick 事件链接到 HTML 中的一个元素？我可以让他们改变href吗？

【英文标题】：How can I have multiple onClick events linked to one element in HTML? And can I have them change href's?

【发布时间】：2012-05-24 02:31:13

【问题描述】：

我正在为我正在实习的一家公司建立一个页面，但似乎无法弄清楚这一点。您在下面看到的代码只是一个简化的模板，因此我不会提供有关公司的任何信息（并且所有样式属性都在单独的文档中，因此代码中的所有内容都可以。

我遇到的问题是使多个 onClick 事件起作用。就此而言，在评论标签中使用 onClicks 是否可行？我希望显示“进一步说明”的文本根据单击的动物图片更改其 href 路径。

另外，我不能使用任何 javascript，所以请不要建议使用任何 JavaScript。有什么想法吗？

<div id="container">
    <div class="mainPicture">
        <img  id="awesome" name="Awesome2" src="awesome.png" />
    </div>
    <div id="gallery">
        <ul class="popOut">
            <li>
                <a href="DogText.html" target="AnimalInfo" onClick="document.Awesome2.src='dog.jpg'"> <!--onClick="document.furtherInstructions.href='DogText.html'">--> 
                    <img src="dog.jpg" ><img src="dog.jpg"  class="preview"> 
                </a>
            </li>   
            <li>
                <a href="CatText.html" target="AnimalInfo" onClick="document.Awesome2.src='cat.jpg'"> <!--onClick="document.furtherInstructions.href='CatText.html'">-->
                    <img src="cat.jpg" ><img src="cat.jpg"  class="preview"> 
                </a>
            </li>   
            <li>
                <a href="ParrotText.html" target="AnimalInfo" onClick="document.Awesome2.src='parrot.jpg'"> <!--onClick="document.furtherInstructions.href='ParrotText.html'">-->
                    <img src="parrot.jpg" ><img src="parrot.jpg"  class="preview"> 
                </a>
            </li>       
            <li>
                <a href="LizardText.html" target="AnimalInfo" onClick="document.Awesome2.src='lizard.jpg'"> <!--onClick="document.furtherInstructions.href='LizardText.html'">--> 
                    <img src="lizard.jpg" ><img src="lizard.jpg"  class="preview"> 
                </a>
            </li>       
            <li>
                <a href="HorseText.html" target="AnimalInfo" onClick="document.Awesome2.src='horse.jpg'"> <!--onClick="document.furtherInstructions.href='HorseText.html'">-->
                    <img src="horse.jpg" ><img src="horse.jpg"  class="preview"> 
                </a>
            </li>       
            <li>
                <a href="ChickenText.html" target="AnimalInfo" onClick="document.Awesome2.src='chicken.jpg'"> <!--onClick="document.furtherInstructions.href='ChickenText.html'">--> 
                    <img src="chicken.jpg" ><img src="chicken.jpg"  class="preview"> 
                </a>
            </li>   
            <li>
                <a href="DefaultText.html" target="AnimalInfo" class="center" onClick="document.Awesome2.src='awesome.png'"> <!--onClick="document.furtherInstructions.href='DefaultText.html'">-->
                    <p>Default Image</p>
            </a>
            </li>
        </ul>
        <div id="rightcol">
            <iframe src="DefaultText.html" title="Information About Animals" name="AnimalInfo" class="fixThisHeight">
            </iframe>
        </div>
        <div id="externalInstructions">
            <a href="DefaultText.html" name="furtherInstructions">
                <p>Further Instructions</p>
            </a>
        </div>
    </div>
</div>

【问题讨论】：

我不想告诉你，但是 onclick 属性 是 Javascript。没有它，就无法在网页中获得任何动态行为。

也许不要使用onclick，将您的点击处理移至外部脚本并在那里分配多个功能。另外：您不能使用 JavaScript 来使用 JavaScript？什么..？

"我不能使用任何 JavaScript，所以请不要建议使用任何" - 但你已经在使用 JavaScript 了吗？！

伙计们，对不起，我不清楚。我们只能使用内联 JavaScript。由于我们正在构建网站的内容管理系统，我们不能有 元素或导入外部脚本文件。

【参考方案1】：

只需用分号分隔您的命令：

onClick="document.Awesome2.src='chicken.jpg'; document.furtherInstructions.href='ChickenText.html';">

【讨论】：

刚刚试过这个： 没用。它总是打开 DefaultText.html。请指教。

如果我有一些第三方代码自己定义了onClick，我无法修改它（但仍想自己进行额外的点击处理）怎么办？

将document.furtherInstructions.href 更改为document.getElementById('furtherInstructions').href 并将<a ... name="furtherInstructions"> 更改为<a ... id="furtherInstructions">。还将所有<a href=... target="AnimalInfo" 更改为<a href="javascript:void(0);"（不带目标=）