Javascript 需要重新启用在onclick事件中禁用的onmouseout
我在这里和互联网上搜索了一些代码,这些代码可以重新启用onMouseOut,而onMouseOut在onClick代码中已被禁用。我发现了一些东西,但在我的情况下没有任何东西是有效的 页面上有一个容器div,其中包含两个div,一个用于图像,另一个用于相应的文本。图片下方是四个链接(1、2、3、4),以无序列表的形式排列。当访问者翻过#2时,图像需要更改为img2,匹配的文本div需要从“隐藏”变为“显示”。onMouseOut将图像和文本重置为原始版本。onClick将图像/文本更改为单击的内容,然后禁用onMouseOut 现在,我需要一种方法,使onMOuseOut在下次访问者翻过该链接时再次工作。正如我现在看到的,一旦onMouseOut被禁用,它将保持禁用状态,直到我重新加载页面 以下是迄今为止的代码:Javascript 需要重新启用在onclick事件中禁用的onmouseout,javascript,javascript-events,onmouseout,Javascript,Javascript Events,Onmouseout,我在这里和互联网上搜索了一些代码,这些代码可以重新启用onMouseOut,而onMouseOut在onClick代码中已被禁用。我发现了一些东西,但在我的情况下没有任何东西是有效的 页面上有一个容器div,其中包含两个div,一个用于图像,另一个用于相应的文本。图片下方是四个链接(1、2、3、4),以无序列表的形式排列。当访问者翻过#2时,图像需要更改为img2,匹配的文本div需要从“隐藏”变为“显示”。onMouseOut将图像和文本重置为原始版本。onClick将图像/文本更改为单击的内
<head>
<script>
if (document.images) {
book1 = new Image
book2 = new Image
book3 = new Image
book4 = new Image
book1.src = "/llb/assets/book1.jpg"
book2.src = "/llb/assets/book2.jpg"
book3.src = "/llb/assets/book3.jpg"
book4.src = "/llb/assets/book4.jpg"
}
function swapImage(thisImage,newImage) {
if (document.images) {
document[thisImage].src = eval(newImage + ".src")
}
}
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility(){
var sel = document.getElementById('bookleadin').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
</script>
</head>
<body>
<div id="content">
<div id="books">
<div id="bookimages">
<img id="bookcover" name="bookcover" src="../llb/assets/book1.jpg" />
<ul>
<li><a href="#" onclick="swapImage('bookcover','book1'); show_visibility('bt1'); this.onmouseout=''" onMouseOver="swapImage('bookcover','book1')" onMouseOut="swapImage('bookcover','book1')">1</a></li>
<li><a href="#" onclick="swapImage('bookcover','book2'); show_visibility('bt2'); this.onmouseout=''" onMouseOver="swapImage('bookcover','book2')" onMouseOut="swapImage('bookcover','book1')">2</a></li>
<li><a href="#" onclick="show_visibility('bt3'); swapImage('bookcover','book3')" onMouseOver="swapImage('bookcover','book3')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book3')">3</a></li>
<li><a href="#" onclick="show_visibility('bt4'); swapImage('bookcover','book4')" onMouseOver="swapImage('bookcover','book4')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book4')">4</a></li>
</ul>
</div><!-- end bookimages -->
<div id="bookleadin">
<div id="bt1" style="display:block;"><p>Writing starts with living...</p>
</div>
<div id="bt2" style="display:none;"><p>The air is silk...</p>
</div>
<div id="bt3" style="display:none;"><p>I lived in the woods...</p>
</div>
<div id="bt4" style="display:none;"><p>I tried to forget...</p>
</div>
</div><!-- end bookleadin -->
<div class="spacer"></div>
</div><!-- ends books -->
</div><!-- end content -->
if(document.images){
book1=新图像
book2=新图像
book3=新图像
book4=新图像
book1.src=“/llb/assets/book1.jpg”
book2.src=“/llb/assets/book2.jpg”
book3.src=“/llb/assets/book3.jpg”
book4.src=“/llb/assets/book4.jpg”
}
函数交换图像(thisImage、newImage){
if(document.images){
文档[thisImage].src=eval(newImage+“.src”)
}
}
功能显示可视性(IDS){
隐藏可见性();
document.getElementById(IDS).style.display='block';
}
函数hide_visibility(){
var sel=document.getElementById('bookleadin').getElementsByTagName('div');
对于(var i=0;i
您可以在onclick
处设置一个标志,以验证是否已单击该标志。如果是,则执行交换onmouseout
,否则只执行this.onmouseout=”“
编辑:
if(document.images){
book1=新图像
book2=新图像
book3=新图像
book4=新图像
book1.src=“/llb/assets/book1.jpg”
book2.src=“/llb/assets/book2.jpg”
book3.src=“/llb/assets/book3.jpg”
book4.src=“/llb/assets/book4.jpg”
}
var swap_list={};//交换元素的列表
函数交换图像(thisImage、newImage){
如果(交换列表[thisImage]='undefined'| |交换列表[thisImage]=''的类型)
if(document.images){
文档[thisImage].src=eval(newImage+“.src”);
交换列表[thisImage]=新建图像;
}
其他的
{
交换列表[此图像]='';
文档[thisImage].src=“../llb/assets/book1.jpg”;
}
}
功能显示可视性(IDS){
隐藏可见性();
document.getElementById(IDS).style.display='block';
}
函数hide_visibility(){
var sel=document.getElementById('bookleadin').getElementsByTagName('div');
对于(变量i=0;i
写作从生活开始。。。
空气是丝质的。。。
我住在树林里。。。
我试图忘记。。。
让我重新表述一下,看看我是否理解您的意思。我将编写一个函数来确定是否发生了onClick。如果为true,我将禁用onMouseOut,如果为false,它将不会触动onMouseOut,因此当光标移离链接时,原始内容仍会再次出现。我将在哪里调用verify函数from?我将使用什么代码来禁用onMouseOut事件,以及一旦用户悬停或单击其他链接,我将如何为该链接重新启用它?@ssliver1您不禁用onMouseOut,您只需验证onMouseOut是否发生,如果发生了,则不执行其他操作。您需要一些代码或算法的纯逻辑吗够了吗?也许我确实需要一些代码。我一直在试图找出何时/何地触发检查以验证onclick。每个链接都有三个事件,mouseOver、mouseOut和onclick。如果他们单击链接,我需要mouseOut什么也不做。如果他们不单击,我需要mouseOut来完成操作。谢谢您的帮助。@ssliver1我已经重新编辑了这篇文章,很抱歉耽搁了。希望这是你正在寻找的。
<head>
<script>
if(document.images) {
book1 = new Image
book2 = new Image
book3 = new Image
book4 = new Image
book1.src = "/llb/assets/book1.jpg"
book2.src = "/llb/assets/book2.jpg"
book3.src = "/llb/assets/book3.jpg"
book4.src = "/llb/assets/book4.jpg"
}
var swap_list = {}; // a list of swapped elements
function swapImage(thisImage, newImage) {
if(typeof swap_list[thisImage] == 'undefined' || swap_list[thisImage]=='')
if(document.images) {
document[thisImage].src = eval(newImage + ".src");
swap_list[thisImage] = newImage;
}
else
{
swap_list[thisImage] = '';
document[thisImage].src = "../llb/assets/book1.jpg";
}
}
function show_visibility(IDS) {
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility() {
var sel = document.getElementById('bookleadin').getElementsByTagName('div');
for(var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
}
</script>
</head>
<body>
<div id="content">
<div id="books">
<div id="bookimages">
<img id="bookcover" name="bookcover" src="../llb/assets/book1.jpg" />
<ul>
<li>
<a href="#" onclick="swapImage('bookcover','book1'); show_visibility('bt1'); " onMouseOver="swapImage('bookcover','book1')" onMouseOut="swapImage('bookcover','book1')">1</a>
</li>
<li>
<a href="#" onclick="swapImage('bookcover','book2'); show_visibility('bt2'); " onMouseOver="swapImage('bookcover','book2')" onMouseOut="swapImage('bookcover','book1')">2</a>
</li>
<li>
<a href="#" onclick="show_visibility('bt3'); swapImage('bookcover','book3')" onMouseOver="swapImage('bookcover','book3')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book3')">3</a>
</li>
<li>
<a href="#" onclick="show_visibility('bt4'); swapImage('bookcover','book4')" onMouseOver="swapImage('bookcover','book4')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book4')">4</a>
</li>
</ul>
</div><!-- end bookimages -->
<div id="bookleadin">
<div id="bt1" style="display:block;">
<p>
Writing starts with living...
</p>
</div>
<div id="bt2" style="display:none;">
<p>
The air is silk...
</p>
</div>
<div id="bt3" style="display:none;">
<p>
I lived in the woods...
</p>
</div>
<div id="bt4" style="display:none;">
<p>
I tried to forget...
</p>
</div>
</div><!-- end bookleadin -->
<div class="spacer"></div>
</div><!-- ends books -->
</div><!-- end content -->
</body>