具体的なクリックトリガーリンクを作る方法は他に何かしますか？

Question

私はこれを "ウェルカムダイアログ"のためにやっています。

この機能は、特定の<div>をクリックしたときに聞き取り、別のWebページに送信するか、歓迎<div>を閉じます。

しかし、私はそれが "近い"機能のためには機能しないと思う。 HTMLの頭の中で

マイスクリプト：HTML本体内

function hideWell() { 
    if (("welSolu").on('click hover')) { 
     location.href = "http://www.cnn.com"; 
    } 
    document.getElementById("welScreen").style.visibility = "hidden"; 
    document.getElementById("welScreen").style.display = "none"; 
    document.querySelector("html").style.overflow = "visible"; 
} 

マイ<div> S：

<div id="welScreen" onmousedown="hideWell()"> 
    <div id="welSolu">to go another page click here</div> 
</div> 

Answer 1

私はので、あなたがそのために2つの異なる機能を使用することをお勧め1つの機能が1つのことを実行するのがよい方法です。 。いくつかのミスを持っているあなたのコードは、jQueryのなしあなたはこのようなあなたのことを行うことができますイベント：（ 'クリックホバー'）に

function doRedirect(e) { 
 
    // Prevent event propagation to the outer div 
 
    e.stopPropagation(); 
 
    // Do your redirect 
 
    console.info("redirect"); 
 
} 
 

 
function hideWell(e) { 
 
    // Do the hiding thing 
 
    console.info("hideWell"); 
 
}

#welScreen { 
 
    padding: 15px; 
 
    background: gray; 
 
} 
 

 
#welSolu { 
 
    background: green; 
 
}

<div id="welScreen" onmousedown="hideWell(event)"> 
 
    <div id="welSolu" onmousedown="doRedirect(event)">to go another page click here</div> 
 
</div>

Answer 2

あなたのコードに問題がif句である - jQueryの用途でon()方法コールバックメカニズム - あなたが "ステータスを確認する"と呼ばれるものではなく、代わりに "ステータス変更通知に登録する"ために使用します。

だから、このようなものは、目的の動作です：

$("#welSolu").on('click hover', function() { 
    location.href = "http://www.cnn.com"; 
}); 

（誰かがページ内の要素の上に置いたときに、現在のページを変更することは本当に破壊的ではあるが、それをしないでください）。

このコードは、hideWell()機能の内部にあるべきではありません。ページのレディ状態の処理の一部として実行する必要があります。つまり、「ドキュメントが準備完了」になった時点ですぐに実行する必要があります。それは、あなたが期待するよう、それが有効しまいますように、ユーザーが上の「ダウンマウスを置いた」ときに、関数の他の部分は同じに滞在することができます

$(document).ready(function(){ 
    $("#welSolu").on('click hover', function() { 
     location.href = "http://www.cnn.com"; 
    }); 
}); 

：jQueryのは、次のようになり、そのための施設を持っていますJQueryのイベントハンドラで扱われていなかったdivの部分ですが、JQueryのイベント処理を使用するように変更して、すべてのコードを同じメカニズムを使用するように変更することをお勧めします。そうですね。

だから、完全な交換用のコードかもしれないが、次のようになります

スクリプトHEAD中：

$(document).ready(function() { 
    $("#welSolu").on('click hover', function() { 
     location.href = "http://www.cnn.com"; 
    }); 
    $("#welScreen").on('click', function() { 
     document.getElementById("welScreen").style.visibility = "hidden"; 
     document.getElementById("welScreen").style.display = "none"; 
     document.querySelector("html").style.overflow = "visible"; 
    }); 
} 

Answer 3

れるonmousedownイベントに関数を添付する必要はありません。イベントリスナーを設定するだけです。私はあなたが歓迎のdiv要素を非表示にする際に、完全にわからないんだけど、このようなものは動作するはずです：

$('#welSolu').click(function() { 
    location.href = "http://www.cnn.com"; 
}); 

$('#welScreen').click(function() { 
    this.hide(); 
}); 

HTML：

<div id="welScreen"> 
    <div id="welSolu">to go another page click here</div> 
</div>