href와 on click to HTML 태그 모두 포함

href와 on click to HTML 태그 모두 포함

다음 요소가 있는 경우:

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

어떻게 하면 둘 다 만들 수 있을까요?href그리고.onClick가급적 함께 일함onClick먼저 달려요?

약간의 구문 변경과 함께 필요한 것을 이미 가지고 있습니다.

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

의 기본 동작입니다.<a>태그의onclick그리고.href속성은 다음을 실행합니다.onclick, 그 다음에 따라갑니다.href하기만 하면onclick돌아오지 않음false, 이벤트 취소(또는 이벤트가 차단되지 않았음)

jQuery를 사용합니다.당신은 그들을 사로잡아야 합니다.click이벤트 후 웹사이트로 이동합니다.

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

이를 달성하려면 html을 사용합니다.

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

여기 작동 예시가 있습니다.

jQuery는 필요없습니다.

어떤 분들은.onclick나쁜 연습...

이 예제에서는 순수 브라우저 자바스크립트를 사용합니다.기본적으로 클릭 핸들러가 탐색 전에 평가를 수행하는 것으로 표시되므로 탐색을 취소하고 원하는 경우 직접 수행할 수 있습니다.

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

사용.<button>대신.일반적으로 실제 URL로 이동할 때는 하이퍼링크만 사용해야 합니다.

우리는 단추를 앵커 요소처럼 스타일링 할 수 있습니다.

출처: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#onclick_events

앵커 요소는 페이지 새로 고침을 방지하기 위해 href를 # 또는 javascript:void(0)로 설정한 후 클릭 이벤트를 청취함으로써 가짜 버튼으로 악용되는 경우가 많습니다.

이러한 boghref 값은 링크를 복사/드래그하거나, 새 탭/윈도우에서 링크를 열거나, 북마크를 지정하거나, JavaScript가 로드 중이거나, 오류가 발생하거나, 사용하지 않도록 설정할 때 예기치 않은 동작을 발생시킵니다.또한 화면 판독기와 같은 보조 기술에 잘못된 의미를 전달합니다.

저는 인정받은 대답이 통하지 않았습니다.그러나 의 기본 동작을 방지합니다.a href그리고 링크를 따라 'manually'가 작동했습니다

코드 샘플은 다음과 같습니다.

<a href="https://example.com" onClick="myFunction(event)">Link</a>
<script>
function myFunction(event) {
    event.preventDefault();
    // do your thing here
    window.location.href = event.currentTarget.href;
}
</script>

사용하다ng-click대신에onclick. 그리고 그것만큼 간단합니다.

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>

언급URL : https://stackoverflow.com/questions/14867558/including-both-href-and-onclick-to-html-a-tag